FormData ajax upload на IE8 → альтернативы и как это работает

Я печатаю для загрузки изображения с помощью ajax, поэтому я использую FormData, но он не работает с IE8. Я просмотрел его, и невозможно использовать FormData с IE8, но я не нашел ничего, что мог бы использовать вместо этого, чтобы он работал на IE8 и другом браузере. Может ли кто-нибудь сказать мне, что делать, и как это сделать?

Форма, которую я пытаюсь отправить

<form id="addImgForm" name="addImgForm" method="post" action="#URL(Action('ChiliTest-ImageUpload'))#" enctype="multipart/form-data">
    <input id="newImage" type="file" name="newImage">
    <input type="hidden" name="MAX_FILE_SIZE" value="12345">
    <span id="addImage" class="button-addImage" type="submit"><isTradConstant keyword="l_customizationsChiliEditor_AddImageButtonTitle" template="CustomizationsChiliEditor" init="Ajouter"></span>
</form>

Вызывается приложением addImgForm submit

$.ajax({ 
    url: myUrl,
    type: "POST",
    data: new FormData($(this).parent()[0]),
    contentType : false,
    async: false,
    processData: false,
    cache: false,
    success: function(data) {
        //do something
    }
}); 
return false;

Ответы

Ответ 1

В идеале, когда я столкнулся с этой проблемой, я проверил FormData в браузере, и если это возвращает undefined, то я отправился на отправку формы через iframe.

Ответ 2

Вы можете использовать jQuery Form Plugin для загрузки файлов через ajax в IE 8, а ваш пример кода должен выглядеть примерно так:

    <form id="myForm" action="/demo/Upload" method="post"   enctype="multipart/form-data">
         <input type="file" size="60" name="myfile">
         <input type="submit" value="Ajax File Upload">
    </form>

    <div id="progress">
            <div id="bar"></div>
            <div id="percent">0%</div >
    </div>
    <br/> 
    <div id="message"></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script>
    $(document).ready(function() {

        var options = { 
            beforeSend: function() 
            {
                $("#progress").show();
                //clear everything
                $("#bar").width('0%');
                $("#message").html("");
                $("#percent").html("0%");
            },
            uploadProgress: function(event, position, total, percentComplete) 
            {
                $("#bar").width(percentComplete+'%');
                $("#percent").html(percentComplete+'%');
            },
            success: function() 
            {
                $("#bar").width('100%');
                $("#percent").html('100%');
            },
            complete: function(response) 
            {
                $("#message").html("<font color='green'>"+response.responseText+"</font>");
            },
            error: function()
            {
                $("#message").html("<font color='red'> ERROR: unable to upload files</font>");
            }

        }; 

        $("#myForm").ajaxForm(options);

    });
    </script>

Ответ 3

Мы использовали jquery plugin для этого и решили эту проблему.

Слишком просто использовать

$('#myForm').ajaxForm(function() { 

});

вместо вызова ниже, он автоматически устанавливает все параметры.

$.ajax({ 
    url: myUrl,
    type: "POST",
    data: new FormData($(this).parent()[0]),
    contentType : false,
    async: false,
    processData: false,
    cache: false,
    success: function(data) {
        //do something
    }
});

Надеюсь, что это сработает, дайте мне знать, есть ли какие-либо препятствия во время реализации. Убедитесь, что вы добавили плагин jquery перед использованием функции ajaxform. Не нужно ничего делать для другого браузера, он работает для IE и других.