Ajax jQuery поддержка Fileupload crossbrowser

Я в настоящее время работаю над сценарием загрузки файла 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) не дает ошибку, и загружающаяся анимация просто продолжает вращаться без файла, когда-либо загружаемого... Кто-либо надел какую-либо идею, как сделать эту работу?

5
задан Zenon 21 January 2010 в 12:30
поделиться

3 ответа

Почему бы не использовать это, http://valums.com/ajax-upload/ ?

или, по крайней мере, посмотрите на их код, чтобы увидеть правильный путь для создания формы, которая будет работать крест -броска.

4
ответ дан 14 December 2019 в 08:51
поделиться

вот рабочий пример для 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

.
0
ответ дан 14 December 2019 в 08:51
поделиться

Я думаю, ваш кадр никогда не прилагается к DOM в IE. По крайней мере, если вы опубликовали HTML, завершено. Поскольку он не содержит ни одного div с id = fileuploaddiv

, вы можете подтвердить это, добавив iFrame с ненулевой шириной и высотой и установите SRC на правильный URL.

0
ответ дан 14 December 2019 в 08:51
поделиться
Другие вопросы по тегам:

Похожие вопросы: