13

画像を非同期でアップロードできる小さな JavaScript アプリケーションを作成しています。

このスクリプトは、Internet Explorer を除くすべてのブラウザーで素晴らしい動作をします...

そのため、私が最初に作成したのは、jQuery 用の AjaxForm プラグインを使用して IE9 バージョンのフォールバックを作成することでした。これはうまく機能します。

これがJSスクリプトです。

$("#Uploader").change(function(e){
        var form = $("#UploaderForm");
        form.trigger('submit');
        $(this).attr('disabled','disabled');
        e.preventDefault();
});
$("#UploaderForm").submit(function(e){
        e.preventDefault();
        e.stopPropagation();
        var type="POST";var loading=$("#PhotoIsLoading");
        if(windowApi === true){
            var formData = new FormData($(this)[0]);
            $.ajax({
                url: url,
                type: type,
                xhr: function() {
                    myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ myXhr.upload.addEventListener('progress',progressHandlingFunction, false);}
                    return myXhr;
                },
                beforeSend: function(){loading.removeClass('isHidden_important');},
                success: function(response){
                    jres = JSON.parse(response);
                    alert("Test ok, file uploaded");
                },
                error: function(response){console.warn(response);},
                data: formData, 
                cache: false,
                contentType: false,
                processData: false
            });
            e.preventDefault();
        }else{
            $(this).ajaxSubmit({
                url: url,
                dataType: 'json',
                type: type,
                beforeSubmit: function(){loading.removeClass('isHidden_important');$(this).formSerialize();},
                success:function(response){
                    jres = JSON.parse(response);
                    alert("FallbackTest Complete");
                },
                error: function(response){console.warn(response);},
            });
            e.preventDefault();
            return false;
        }
    });

WindowApi他のすべての変数はグローバル スクリプトで定義されていますが、心配する必要はありません。正確にWindowApiは、これは次のとおりです。

var windowApi=true;
if(window.File&&window.FileReader&&window.FileList&&window.Blob){
console.log("window.api ready");windowApi=true;}
else{console.log("window.api not ready");windowApi=false;};

したがって、この一連のコード行を使用して、すべてのブラウザーと IE9 ブラウザーを処理します...

window.*すべてのメソッドがあり、オブジェクトを使用できるため、問題は IE10 にありFormDataます。しかし、IE10 と FormData で何かをアップロードしようとすると、formData オブジェクトに対して「アクセスが拒否されました」というエラーが表示されます。

このプロセスに含まれる HTML は次のとおりです。

<form name="UploaderForm" id="UploaderForm" method="post" enctype="multipart/form-data">
    <input type="file" name="Uploader" id="Uploader" accept="image/*" tabindex="1" />
</form>

最後に私の質問は次のとおりです。

FormData オブジェクトにアクセスしようとしたときに、IE10 で「アクセスが拒否されました」という例外が発生しないようにするにはどうすればよいですか?

4

2 に答える 2

7

https://stackoverflow.com/a/13657047/641293およびhttps://stackoverflow.com/a/4335390/641293が役立つ場合があります。<input type='file'>IEは、プログラムで何ができるかについて非常に厳格です。

最初の行に基づいて、最初の行をこれに変更すると問題が解決しますか？

$("#Uploader").on('click', function(e){ /* rest of the function unchanged... */
于 2013-03-15T06:53:23.640 に答える
1

JavaScript によってめちゃくちゃにされたフィールドを含むフォームを送信すると、アクセスが拒否されます。disabledアップロード フィールドに属性を動的に追加したため、 Access denied. changeたぶん、イベントでフィールドを無効にせずに試してみるべきですか？

ところで、FormDataと組み合わせての可用性を確認したほうがよい場合がありFile APIます。

var formDataSupport = false;
if (typeof FormData === 'function' && 
    window.File && 
    window.FileReader && 
    window.FileList && 
    window.Blob)
{
  console.log("File API available, formData available");  
  formDataSupport = true; 
}
于 2013-03-15T07:37:18.290 に答える