创建您自己的输入版本[type=file]

Question

我有一个有趣的问题正在尝试解决，想知道是否有人可以帮我解决一下。

我正在构建一个小工具，允许用户将文件拖放到我们的 CMS 中。虽然我的拖放部分工作正常（使用新的 HTML5 API），但我对文件上传的工作方式感到困惑，特别是因为我的限制是我无法修改任何服务器的功能。我查看了所有其他示例，它们都具有相对简单的用例，它们只是发送文件数据，而无需将所有内容转换为 multipart/form-data 等。

目前服务器有一个简单的表单，看起来有点像这样：

Name: [ input=text ]
File: [ input=file ]
Caption: [ textarea ]

当用户点击“保存”按钮时，会发出内容类型为 multipart/form-data 的 POST 调用。

最初我想我可以用我自己的隐藏输入控件替换当前输入控件（使用相同的“名称”属性），并将 base64 编码数据作为“值”，但是 CMS 需要一个“文件名”要通过，通常由 input=file 处理。例如，最后的帖子看起来有点像这样：

Content-Disposition: form-data; name="image_0"; filename="assets.jpg" 

Content-Type: image/jpeg

<Some binary image data here>

我是不是完全走错了路？我应该只使用 XHR 对象吗？

干杯

Answer 1

我解决了。

这是我所做的和我的参考资料：

• Sending multipart/formdata with jQuery.ajax
• https://developer.mozilla.org/En/Using_XMLHttpRequest#Using_FormData_objects
• https://developer.mozilla.org/en/DOM/File

我必须使用 FormData 对象（在 Firefox 4+、Safari 5+ 和 Google Chrome 中可用），当然还有 FileReader 对象。

这里是实现（使用 jQuery）：

// The file object needs to come from the "drop" event and is read by the "FileReader" object with the readAsBinaryString() function.
// var file = null;

var data = new FormData();
$("#main_form input:not([type=file])").each(function(){
    data.append($(this).attr("name"), $(this).val());
});
data.append("image_0", file);
$.ajax({
    url: $("#main_form").attr("action"),
    type: "POST",
    data: data,
    processData: false,
    contentType: false
});

目前 IE 不是问题，但很快就会出现（因为我需要将此扩展移植到 IE）。有没有更好的方法来为 IE 做到这一点？

Answer 2

我可能弄错了，但我相信没有办法对文件上传进行 AJAX 化。您的选择要么是 Flash 或 Java 之类的插件，要么是基于帧的时髦解决方案，上传发生在单独的帧中。我认为您在那里发现的任何“AJAX”文件上传控件都使用其中一种方法。

显然，最简单的方法就是将整个表单发布到服务器上，但对我来说，这是 2005 年的事。