Я в настоящее время работаю над сценарием загрузки файла Ajax, который работает как очарование в Firefox, но не работает в IE.
это - основной HTML, который я использую:
<form >
<input type="file" name="FileFields" id="FileFields"/>
<button type="button" onclick="uploadFile();" id="uploadButton">Upload</button>
<ul id="files"/>
... other form elements ...
</form>
<div id="fileUploadDiv"/>
это - функция uploadFile:
function uploadFile()
{
//we don't want more then 5 files uploaded
if($('#files li').size() >= 5)
{
return;
}
//disable the upload button
$('#uploadButton').attr('disabled','disabled');
//show loading animation
$('#files').append(
$('<li>')
.attr('id','loading')
.append(
$('<img>').attr('src','/images/loading.gif')
)
.addClass('loading')
);
//add all neccessary elements (the form and the iframe)
$('#fileUploadDiv').append(
$('<form action="/uploadFile" method="post" id="fileUploadForm">')
.attr('enctype','multipart/form-data')
.attr('encoding', 'multipart/form-data')
.attr('target', 'upload_frame')
.append(
$('#FileFields').clone()
.css('visibility','hidden')
)
.append(
$('<iframe>').attr('name','upload_frame')
.load(function(){finishedPostingFile();})
.attr('id','upload_frame')
.attr('src','')
.css({
'width':'0px',
'height':'0px',
'border':'0px none #fff'
})
)
);
//start uploading the file
$('#fileUploadForm').submit();
}
и finishedPostingFile () был бы вызовом, назад функционируют, после того как iframe закончил отправлять/загружать.
Теперь, это работает как очарование в Firefox, но не работает в IE. Я уже выяснил тот IE потребности attr('encoding',...)
вместо attr('enctype',...)
и я также попробовал его, не создавая форму и iframe на лету путем записи тех элементов как простого HTML, который действительно не имел значения.
IE (IE8, для бетона, не протестировали его в <8) не дает ошибку, и загружающаяся анимация просто продолжает вращаться без файла, когда-либо загружаемого... Кто-либо надел какую-либо идею, как сделать эту работу?
Почему бы не использовать это, http://valums.com/ajax-upload/ ?
или, по крайней мере, посмотрите на их код, чтобы увидеть правильный путь для создания формы, которая будет работать крест -броска.
вот рабочий пример для Firefox/IE7/IE8, в настоящее время я использую диалог jqueryUI для индикатора прогресса.
просто замените "DocumentUploadForm" на Id вашей формы
$(document).ready(function() {
$("#DocumentUploadForm").submit(function(data) {
data.preventDefault;
var submittingForm = $("#DocumentUploadForm");
var frameName = ("Upload");
var uploadFrame = $("<iframe name=\"" + frameName + "\" />");
uploadFrame.css("display", "none");
$(".document_upload_progress").dialog({
autoOpen: true,
bgiframe: true,
resizable: false,
height: 150,
width: 350,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
open: function() {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove();
},
close: function() {
$(".document_upload_progress").dialog("destroy");
}
});
uploadFrame.load(function(data) {
//submit complete
setTimeout(function() { uploadFrame.remove(); }, 100);
$('#document_upload_dialog').dialog('close');
});
$("body:first").append(uploadFrame);
//setup complete
submittingForm.attr("target", frameName);
});
});
hth
.Я думаю, ваш кадр никогда не прилагается к DOM в IE. По крайней мере, если вы опубликовали HTML, завершено. Поскольку он не содержит ни одного div с id = fileuploaddiv
, вы можете подтвердить это, добавив iFrame с ненулевой шириной и высотой и установите SRC на правильный URL.