Problem submitting file content in Internet Explorer
-
26-09-2019 - |
Question
Im submitting my file through jquery by using Jform.js plugin and its working in Firefox but when i try it on IE8 file properly sumbitted but file upload control gets hidden and further more when i comment IE condition then the file upload control doesnt get hide but when i check Request.Files[0].ContentLength in my controller it have 0 value. This is my code and what may be im doing wrong? Im using Asp.net MVC and jquery-1.4.2
var myform = document.createElement("form");
myform.style.display = "none"
myform.action = "/Media/AjaxSubmit";
myform.enctype = "multipart/form-data";
myform.method = "post";
var imageLoad;
var imageLoadParent;
if (document.all) {//IE
imageLoad = document.getElementById(fileId);
imageLoadParent = document.getElementById(fileId).parentNode;
myform.appendChild(imageLoad);
document.body.appendChild(myform);
}
else {//FF
imageLoad = document.getElementById(fileId).cloneNode(true);
myform.appendChild(imageLoad);
document.body.appendChild(myform);
}
$(myform).ajaxSubmit({ success: function (responseText) {
});
Solution 2
Solution is simple i just add that browse control when it response back from ajaxsubmit function and code is as follows
$(myform).ajaxSubmit({ success: function (responseText) {
if (document.all) {//IE
imageLoadParent.appendChild(myform.firstChild);
}
else//FF
{
document.body.removeChild(myform);
}
OTHER TIPS
What is the delirium before .ajaxSubmit
? It looks like code from the end of the 90s. I would recommend you to simply use jQuery and not worry about cross browser issues:
$('form')
.attr('action', '/Media/AjaxSubmit')
.attr('method', 'post')
.attr('enctype', 'multipart/form-data')
.hide()
.append($('#' + fileId).clone())
.ajaxSubmit({
success: function(responseText) {
// ...
}
})
.appendTo('body');
Remark: the hardcoded form action looks ugly. You should consider using HTML helpers to generate urls.