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

时间:2014-01-22 14:45:10

标签: javascript jquery html5 drag-and-drop

我在页面上添加了拖放上传表单 - 提示选择文件的“普通”文件输入工作正常(所有额外标记只是引导程序)但拖放时{{ 1}}请求缺少文件信息。

e.g。

拖放请求

POST

文件输入请求

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


------WebKitFormBoundaryJrgn7dns6QMhgKLZ--

HTML

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


------WebKitFormBoundarynNBsaoDo4VMpbZUv--

JS

<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>

我看不出我能做错的事情,我确信拖拉工作正常,然后我正在玩风格和调整代码,似乎打破了拖放功能。

1 个答案:

答案 0 :(得分:0)

发现我做错了什么。

更改这些行:

// 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]);
}