4

フォームが正常に送信された後にコールバックが必要です。このフォームはページをリロードせず、「クロス オリジン」の問題のため、代替の ajax は使用できません。

私が今持っているものは次のとおりです。

$('#uploadform form').on('submit', function(){
    // DO STUFF HERE
});

ただし、これは送信イベントがトリガーされるとすぐに発生し、コールバックとしてではありません。ajax を使用せずに、応答を受信した後にのみコードを実行するにはどうすればよいですか(そして、応答を取得して何かを行うにはどうすればよいでしょうか)。これは可能ですか？

これは AWS の S3 ファイル ホスティングを介しており、JSONP は使用できません。

簡単にするために必要がない場合は、iframeを使用したくありません。

EDIT ファイルのダウンロードリンクがページをリロードしないのと同じように、ページをリロードしません。それ以外の場合は、他のフォームとまったく同じです。iframe 内では送信されません。これは通常の形式ですが、関連するヘッダーではページをリロードする必要はありません。

4

2 に答える 2

5

ページをリロードせずにフォームを送信し、iframeやJSONPを使用せずにフォームを送信できる解決策が見つかりました。おそらく、技術的にはAJAXとしてカウントされますが、これと同じ「クロスオリジン」の問題はありません。

function uploadFile() {

    var file = document.getElementById('file').files[0];
    var fd = new FormData();

    fd.append('key', "${filename}");
    fd.append("file",file);

    xhr = new XMLHttpRequest();

    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);

    xhr.open('POST', 'http://fake-bucket-name.s3-us-west-1.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND 

    xhr.send(fd);
}

function uploadProgress(evt) {
    if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
    }
    else {
      document.getElementById('progressNumber').innerHTML = 'unable to compute';
    }
}

function uploadComplete(evt) {
    /* This event is raised when the server send back a response */
    alert("Done - " + evt.target.responseText );
}

function uploadFailed(evt) {
    alert("There was an error attempting to upload the file." + evt);
}

function uploadCanceled(evt) {
    alert("The upload has been canceled by the user or the browser dropped the connection.");
}

このような単純なフォームで：

<form id="form1" enctype="multipart/form-data" method="post">
    <div class="row">
      <label for="file">Select a File to Upload</label><br>
      <input type="file" name="file" id="file">
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div class="row">
      <input type="button" onclick="uploadFile()" value="Upload">
    </div>
    <div id="progressNumber"></div>
</form>

コールバックであるuploadComplete(evt)関数。ご覧のとおり、ユーザーに表示できる完了率も表示されます。

注：これを行うには、S3アカウントで正しいアップロードポリシーとCORSポリシーを設定する必要があります。– RonSper

于 2012-11-02T04:51:11.673 に答える
2

応答へのアクセスが必要な場合、ajax と iframe で「クロス オリジン」の問題が発生します。

JSONPは、「クロスオリジン」の問題を回避する唯一の方法です。従来の IE バージョンでサポートされていないCORSを使用しない限り、別のドメインでホストされているすべての JSON API で使用されます。

フォームが送信されるサーバーを制御できる場合は、JSONP 互換の応答を返すようにすることができます。そうでない場合、あなたはちょっと運が悪いです。

于 2012-11-01T23:49:53.677 に答える