下面的代码在Chrome,Firefox和Safari中工作正常,但在IE中不起作用(我使用的是IE 9)。前三个浏览器执行所有代码,因此 alert1 和 alert2 都显示出来。奇怪的是,在IE中显示了alert1,但没有显示alert2(并且其余代码也没有执行)。这是怎么回事?
$("#btnUpload").change(function () {
alert("alert1");
var data = new FormData();
alert("alert2");
data.append("dummybestandsnaam", $("#btnUpload").get(0).files[0]);
$.ajax({
url: "FileUploadHandler.ashx?vllid=" + $("#txtVllID").val(),
type: "POST",
data: data,
contentType: false,
processData: false,
//START
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$("#divpb").progressbar({ value: percentComplete });
}
}, false);
return xhr;
},
//EINDE
beforeSend: function () { $("#divpb").show() },
error: function (err) { },
success: function (result) {
//loze parameter aan url meegeven is noodzakelijk omdat anders de image niet ververst vanwege cache
var d = new Date();
$.ajax({
url: "get_img_thumb.ashx?vllid=" + $("#txtVllID").val() + "&r=" + d.getTime(),
datatype: "image/jpg",
success: function (data) {
var d2 = new Date();
$("#imgUploaded").attr("src", "get_img_thumb.ashx?vllid=" + $("#txtVllID").val() + "&r=" + d2.getTime());
}
});
//$("#divGelukt").show("slow", function () { });
},
complete: function () { $("#divpb").hide() }
});
});
代码段网页
<label class="myLabel">
<input type="file" ID="btnUpload" accept="image/*" />
<span>Wijzig foto</span>
</label>
IE9不支持Formdata。有用的链接:
- http://caniuse.com/#feat=xhr2
- http://ahedg.es/webkit/formdata.html