Heim > Backend-Entwicklung > PHP-Tutorial > 有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。

有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。

WBOY
Freigeben: 2016-06-06 20:47:06
Original
1033 Leute haben es durchsucht

<code><script src="dropzone.js"></script>     
    <form action="data.php" method="post">
    <div class="row-fluid">
        <div class="span4" style="text-align: center;">
            <div id="my-dropzone">
                <img  id="imgNoPhoto" src="/img/no-photo.jpg" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >
            </div>
            <a id="openDropZone" href="#" class="btn btn-inverse" style="margin-top: 10px;">
                <img  src="" class="icon-plus icon-white" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >照片上傳
            </a>
        </div>
    </div>
    <button type="submit">上交</button>
    </form>
<script>
    var myDropzone = new Dropzone("div#my-dropzone", { 
        url: "./data.php",
        enqueueForUpload: true,
        clickable: '#openDropZone',
        thumbnailWidth: 200,
        thumbnailHeight: 200,
        previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\" style=\"display: none;\"><span data-dz-name>\n    <div class=\"dz-size\" style=\"display: none;\" data-dz-size>\n    <img  data-dz-thumbnail / alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >\n  \n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>\n  <div class=\"dz-error-message\"><span data-dz-errormessage>\n"
    });
    myDropzone.on("selectedfiles", function(files) {
        myDropzone.removeAllFiles();
    });

    myDropzone.on("addedfile", function(file) {
        $('#imgNoPhoto').hide(); // hide the default no-imge img
    });

    $('#btnRegister').click(function(){        
        $('#apply-form').submit();
        return false;
    });
</script>            
<script src="jquery.js"></script>
</code>
Nach dem Login kopieren
Nach dem Login kopieren

回复内容:

<code><script src="dropzone.js"></script>     
    <form action="data.php" method="post">
    <div class="row-fluid">
        <div class="span4" style="text-align: center;">
            <div id="my-dropzone">
                <img  id="imgNoPhoto" src="/img/no-photo.jpg" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >
            </div>
            <a id="openDropZone" href="#" class="btn btn-inverse" style="margin-top: 10px;">
                <img  src="" class="icon-plus icon-white" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >照片上傳
            </a>
        </div>
    </div>
    <button type="submit">上交</button>
    </form>
<script>
    var myDropzone = new Dropzone("div#my-dropzone", { 
        url: "./data.php",
        enqueueForUpload: true,
        clickable: '#openDropZone',
        thumbnailWidth: 200,
        thumbnailHeight: 200,
        previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\" style=\"display: none;\"><span data-dz-name>\n    <div class=\"dz-size\" style=\"display: none;\" data-dz-size>\n    <img  data-dz-thumbnail / alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >\n  \n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>\n  <div class=\"dz-error-message\"><span data-dz-errormessage>\n"
    });
    myDropzone.on("selectedfiles", function(files) {
        myDropzone.removeAllFiles();
    });

    myDropzone.on("addedfile", function(file) {
        $('#imgNoPhoto').hide(); // hide the default no-imge img
    });

    $('#btnRegister').click(function(){        
        $('#apply-form').submit();
        return false;
    });
</script>            
<script src="jquery.js"></script>
</code>
Nach dem Login kopieren
Nach dem Login kopieren

贴部分代码你看下,后台是nodejs,希望对你有帮助
view:

<code> <form id="fmUpload" method="post" enctype="multipart/form-data" class="dropzone"></form>
</code>
Nach dem Login kopieren

api:

<code>exports.upload = function(req, res) {
    //express file info
    var resource = req.files.resource;
}
</code>
Nach dem Login kopieren

js:

<code><br>   $("#fmUpload").dropzone({
            paramName: 'resource',(看此处)
            url: '/images/upload',
            dictDefaultMessage: '将文件拖拽至此区域进行上传(或点击此区域)',
            acceptedFiles: 'image/*',
            parallelUploads: 1,
            maxFilesize: 1,
            maxFiles: 1,
            init: function() {},
            success: function(file, data) {
                if (data.status === 1) {
                    $scope.uploadImage = data.message;
                    $scope.listUserImages();
                } else {
                    alertService.showAlert({
                        content: data.message,
                        type: 'warning'
                    });
                    $('.dz-error-mark').show();
                }

            }
        });

</code>
Nach dem Login kopieren

想问下楼主,你的data.php,除了做文件的上传操作,其它的比如操作数据库的操作可以进行么?
我这里也在使用这个插件,但遇到个问题,当把选择的文件上传到指定的路径后,前台如何进行显示,想在进行文件上传操作后,进行数据库插入操作,但不能执行,不知楼主有没有遇到过这样的问题呢?

Verwandte Etiketten:
php
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage