3

我完全坚持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>

但我不知道要序列化表格并发送它

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

4

2 回答 2

3

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

<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>
于 2014-02-06T11:44:12.960 回答
3

如果enqueueForUpload设置为true（默认），文件将像普通文件上传形式一样直接上传。

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

这清楚吗？

因此，关于您的post.php-file 内容的简单示例：

if(!empty($_FILES)){
   move_uploaded_file($_FILES['photos']['tmp_name'],'http://mysite.com/myDir');
}
于 2013-04-07T12:51:37.353 回答