Javascript jQuery文件上传器IE9在上传时未发布任何参数
我正在使用jQuery文件上传器插件和Rails3。插件在此: 我正在使用该插件允许用户上传个人资料照片。到目前为止,该解决方案适用于Chrome、Safari和Firefox。然而在IE上它失败了。当你在IE中选择一个文件时,插件会发布到服务器,但是没有参数,这是一个空的帖子 chrome中的示例帖子:Javascript jQuery文件上传器IE9在上传时未发布任何参数,javascript,jquery,file-upload,blueimp,Javascript,Jquery,File Upload,Blueimp,我正在使用jQuery文件上传器插件和Rails3。插件在此: 我正在使用该插件允许用户上传个人资料照片。到目前为止,该解决方案适用于Chrome、Safari和Firefox。然而在IE上它失败了。当你在IE中选择一个文件时,插件会发布到服务器,但是没有参数,这是一个空的帖子 chrome中的示例帖子: Started PUT "/api/1/settings/ajax_photo_upload" for 10.0.1.3 at 2012-10-02 15:39:20 -0700 Proces
Started PUT "/api/1/settings/ajax_photo_upload" for 10.0.1.3 at 2012-10-02 15:39:20 -0700
Processing by ApiV1::SettingsController#ajax_photo_upload as JS
Parameters: {"photo"=>#<ActionDispatch::Http::UploadedFile:0x007f9e4bac2e48 @original_filename="xxxxx.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"user[photo]\"; filename=\"xxxxx.jpeg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/var/folders/3x/k1yb0r4s07q1jm82kq93ch180000gn/T/RackMultipart20121002-3633-sxsbtu>>}, "update_type"=>"general"}
以下是我的实现:
$('input[type="file"]').fileupload({
url : '/api/1/settings/ajax_photo_upload',
formData : [{
name : 'authenticity_token',
value : $('meta[name="csrf-token"]').attr('content')
}],
type : 'PUT',
dataType: 'json',
add : function (e, data) {
data.submit();
}
});
html
你知道为什么IE会这么做吗?感谢这基本上是关于对HTML5数据标记的支持。IE9有严重的问题。例如,当你上传图像时,在chrome中,它会发送data:blob并在你实际上传图像之前给你预览。在IE中,你不能。在IE9中查看Gmail的邮件附件屏幕,你会看到区别。如果是大型项目,我建议您使用flash作为图像上传工具。您使用的是基本插件吗?我是,我也有同样的问题,与之斗争了一天,结果发现我没有包括jquery.iframe-transport.js插件:
<script src="js/jquery.iframe-transport.js"></script>
见文件
哦!!感谢您将“authenticity_token”键值对作为“formData”包含在内的片段,这帮助我摆脱了rails 3警告:无法验证CSRF令牌的真实性
$("#txt1").fileupload({
replaceFileInput: false,
dataType: "json",
datatype:"json",
url: "<%=Page.ResolveUrl("~/WebService/AddAttachment.ashx")%>",
done: function (e, data) {
$.each(data.result, function (index, value) {
//You get the response data in here from your web service
})
$("#txt1").val("");
}`enter code here`
});
这在IE8和IE9+中都经过测试,工作正常。请确保使用正确的dataType:json或dataType:json,并确保在调试和检查时将web服务方法的响应正确更新为data.result。
谢谢我想说的是数据属性。当您添加要上传的图像时,请选中Google Chrome的Inspect元素。它获取blob:http%3A//blueimp.github.com,它来自HTML5本地数据存储。您可以看到预览图像。在IE9中做同样的事情。您将只看到文件名,不支持本地数据属性。当调用fileupload时,如果您没有看到包含的参数,通常就是这种情况。iframe传输文件未包含或包含不正确。通常,通过设置forceIframeTransport:true,可以在所有浏览器中重现此情况
<script src="js/jquery.iframe-transport.js"></script>
$("#txt1").fileupload({
replaceFileInput: false,
dataType: "json",
datatype:"json",
url: "<%=Page.ResolveUrl("~/WebService/AddAttachment.ashx")%>",
done: function (e, data) {
$.each(data.result, function (index, value) {
//You get the response data in here from your web service
})
$("#txt1").val("");
}`enter code here`
});