Question

我完全坚持Dropzone.js，我想创建一个拖放文件上传

设置好了

<form id='test' enctype="multipart/form-data">
    <input type="text" name="album_name">
    <div id="myId" class="dropzone">

    </div>
    <button type="submit" id="newAlbum">go go</button>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/enyo/dropzone/master/downloads/dropzone.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
     $("#myId").dropzone({ 
        paramName: 'photos',
        url: "post.php",
        dictDefaultMessage: "Drag your images",
        clickable: true,
        enqueueForUpload: true,

        selectedfiles: function()
        {
            $('#newAlbum').show();
        }
    });

});
</script>

但我不知道如何序列化表单，并将其发送

可以请有人给我看一个例子吗？

Answer 1

如果enqueueForUpload设置为true（默认），则文件会直接上传为普通文件上传表单。

在您的情况下，您需要在post.php中设置上传脚本。在那里，该文件将以$_FILES['photos']（paramName）的形式出现。此参数名称默认为“文件”，但您将其设置为不同。

这是清楚的吗？

这是一个关于post.php - 文件内容的简单示例：

if(!empty($_FILES)){
   move_uploaded_file($_FILES['photos']['tmp_name'],'http://mysite.com/myDir');
}

Answer 2

如果输入外表格，您可以为表格添加价值

<input type="text" name="album_name">    
<form id='test' enctype="multipart/form-data">    
    <div id="myId" class="dropzone">

    </div>
    <button type="submit" id="newAlbum">go go</button>
</form>
<script type="text/javascript">
    Dropzone.autoDiscover = false;

    jQuery(function() {

        var myDropzone = new Dropzone("#test",{
            url: "post.php",
            addRemoveLinks: true,
            maxFilesize: 1,
            maxFiles: 5,
            uploadMultiple: false,
            parallelUploads: 100,
            createImageThumbnails: true,
            paramName: "photos",
            autoProcessQueue: false
        });

        var submitButton = document.querySelector("#newAlbum");
        submitButton.addEventListener("click", function() {

            myDropzone.on("sending", function(file, xhr, formData) {
                formData.append("album_name", $("input[name=album_name]").val());    
            });
            myDropzone.processQueue(); // Tell Dropzone to process all queued files.
            alert('show this to have time to upload');
        });

    });
</script>

Dropzone.js如何序列化值并发送它？

2 个答案: