Question

我有一个有趣的问题，我正在努力解决，并且想知道你们中是否有人能帮助我。

我正在构建一个允许用户将文件拖放到CMS中的小工具。虽然我已经让Drag and Drop部分工作正常（使用新的HTML5 API）但我仍然坚持文件上传应该如何工作，特别是因为我的约束是我无法修改任何服务器的功能。我查看了所有其他示例，它们都有相对简单的用例，它们只是将文件数据发送到一起，而不必将所有内容转换为multipart / form-data等。

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

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

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

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

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

Content-Type: image/jpeg

<Some binary image data here>

我是否完全以错误的方式解决这个问题？我应该只使用XHR对象吗？

干杯

Answer 1

我解决了。

这是我做的和我的参考：

我必须使用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-ify文件上传。您的选项可以是Flash或Java等插件，也可以是基于帧的时髦解决方案，其中上传发生在单独的框架中。我认为你发现的任何“AJAX”文件上传控件都采用了这些方法之一。

最简单的方法显然只是将整个表单发布到服务器上，但对我而言感觉如此。

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

2 个答案: