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

我有一个有趣的问题要解决，想知道你们中是否有人能帮我一把。
我正在建立一个小工具，允许用户拖放文件到我们的CMS。虽然我有拖拽部分工作良好（使用新的html5api），但我在文件上传应该如何工作方面陷入困境，特别是因为我的限制是我不能修改服务器的任何功能。我看过所有其他的例子，它们都有相对简单的用例，只需发送文件数据，而不必将所有内容转换为多部分/表单数据等。
目前，服务器有一个简单的表单，看起来有点像这样：

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

当用户点击“保存”按钮时，将发出内容类型multipart/form数据的POST调用。
最初，我想我可以用自己的隐藏控件（使用相同的“name”属性）替换当前的输入控件，并将base64编码的数据作为“value”，但是CMS希望传递一个“filename”，通常由input=文件处理。例如，最后一篇文章看起来有点像这样：

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

Content-Type: image/jpeg

<Some binary image data here>

我这样做是不是完全错了？我应该只使用XHR对象吗？
干杯

最佳答案

我解决了。
以下是我所做的和我的推荐信：
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？

关于javascript - 创建自己的输入版本[type = file]，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6950756/