Question

我正在开发一个新的拖放文件插件，但不像那些插件那样我不希望它上传它，因为它“掉线”。

这个想法是： 1.用户拖放文件。

2.（Some Magic）

3.用户提交表单，而不是那些上传到服务器的文件

我尝试将文件的名称作为input type=hidden添加到表单中，但是我无法在服务器端（php）上执行任何操作;

我可以将文件的详细信息附加到input type=file字段，浏览器会“认为”该文件是通过常规file input field

选择的吗？

我的js：

$('#drop-zone').bind('drop', function(e) {

    // This variable represents the files that have been dragged
    // into the drop area
    var files = e.dataTransfer.files;

    $('#uploaded-list').show();
    // For each file
    $.each(files, function(index, file) {

        /* What can I do in here?*/

    });


});

感谢。

Answer 1

也许你已经解决了这个问题，但我今天想出来了。

这不符合IE9标准（但是再一次，拖放文件都不是），但是你可以存储dataTransfer.files数据，当你准备提交时，从表单创建一个FormData并追加文件。

var formData = new FormData(html_element_of_form); //not a jq obj!
for (var i = 0; i < files.length; i++) {
  formData.append('file', files[i]);
}

// now post a new XHR request
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function () {
  if (xhr.status === 200) {
    console.log('all done: ' + xhr.status);
  } else {
    console.log('blarrghhhhh...');
  }
};

xhr.send(formData);

Answer 2

上面的代码在循环中有一个错误。

应该是这样的：

formData.append('file'+i, files[i]);

否则你将永远覆盖，只会获得一个文件。

拖放文件（无实时上传）/通过表单发送e.dataTransfer.files

2 个答案: