HTML5 拖放上传请求未正确发送答案

【问题标题】：HTML5 Drag and Drop Upload Request Not Sent ProperlyHTML5 拖放上传请求未正确发送
【发布时间】：2014-01-22 14:45:09
【问题描述】：

我在页面上添加了拖放上传表单 - 提示选择文件的“正常”文件输入工作正常（所有额外的标记都只是引导程序）但是在拖放时 @987654321 @request 缺少文件信息。

例如

拖放请求

------WebKitFormBoundaryJrgn7dns6QMhgKLZ
Content-Disposition: form-data; name="tmp_files[][uploaded_data]"; filename=""
Content-Type: application/octet-stream


------WebKitFormBoundaryJrgn7dns6QMhgKLZ--

文件输入请求

------WebKitFormBoundarynNBsaoDo4VMpbZUv
Content-Disposition: form-data; name="tmp_files[][uploaded_data]"; filename="test.jpg"
Content-Type: image/jpeg


------WebKitFormBoundarynNBsaoDo4VMpbZUv--

HTML

<form id="upload_logo" action="/organisation/change_logo" method="POST" enctype="multipart/form-data">

    <div>
        <label class="control-label">Upload Logo</label>
        <div class="controls">
            <div class="fileupload fileupload-new" data-provides="fileupload">
                <div class="input-append">
                    <div class="uneditable-input">
                        <i class="icon-file fileupload-exists"></i> 
                        <span class="fileupload-preview"></span>
                    </div>
                    <span class="btn btn-file">
                        <span class="fileupload-new">Select file</span>
                        <span class="fileupload-exists">Change</span>
                        <input type="file" id="fileselect" name="tmp_files[][uploaded_data]" class="default">
                    </span>
                    <a href="#" class="btn red fileupload-exists" data-dismiss="fileupload">Remove <i class="icon-trash"></i></a>
                </div>
            </div>
        </div>
        <div id="filedrag">or drag and drop here</div>
    </div>
</form>

(function() {

        // getElementById
        function $id(id) {
            return document.getElementById(id);
        }

        // file drag hover
        function FileDragHover(e) {
            e.stopPropagation();
            e.preventDefault();
            e.target.className = (e.type == "dragover" ? "hover" : "");
        }


        // file selection
        function FileSelectHandler(e) {

            // cancel event and hover styling
            FileDragHover(e);

            // fetch FileList object
            var files = e.target.files || e.dataTransfer.files;


            var formData = new FormData($('#upload_logo')[0]);

            $.ajax({           
                url: '/organisation/change_logo', 
                data: formData,
                type: "POST",
                async: false,
                contentType: false,
                processData: false,
                cache: false,           
                success: function(data) {

                    $('.invoice-logo-space').html(data);

                },
                error: function() {
                    alert('Upload failed, please refresh the page and try again.')
                }   
            });


        }


        // initialize
        function Init() {

            var fileselect = $id("fileselect"),
                filedrag = $id("filedrag");

            // file select
            fileselect.addEventListener("change", FileSelectHandler, false);

            // is XHR2 available?
            var xhr = new XMLHttpRequest();
            if (xhr.upload) {

                // file drop
                filedrag.addEventListener("dragover", FileDragHover, false);
                filedrag.addEventListener("dragleave", FileDragHover, false);
                filedrag.addEventListener("drop", FileSelectHandler, false);
                filedrag.style.display = "block";

            }

        }

        // call initialization file
        if (window.File && window.FileList && window.FileReader) {
            Init();
        }


    })();

我看不出我做错了什么，我确信我的拖放工作正常，然后我在玩弄样式并调整代码，似乎破坏了拖放功能。

【问题讨论】：

标签： javascript jquery html drag-and-drop

【解决方案1】：

发现我做错了什么。

更改这些行：

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

var formData = new FormData($('#upload_logo')[0]);

到：

var formData = new FormData();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

for (var i = 0; i < files.length; i++) {
    formData.append('tmp_files[][uploaded_data]', files[i]);
}

【讨论】：