2

AJAXを介してファイルをアップロードしようとしています。たくさん検索しましたが、フォーム送信のみを使用した例を見つけましたが、フォーム送信を使用できません。いくつかの例を試しましたが、サーバーに何も届きません。このリンクを試したところ、機能しましたが、フォームの送信によるものでした。

これがコンテキストに関連するコードです

JSコード

function _upload(filedata) {
    $.ajax({
        url: './myURI',
        data: filedata,
        type: 'POST',

        contentType: 'multipart/form-data',
        mimeType: 'multipart/form-data',    //Property added in 1.5.1

        success: function (data) {
            alert(data);
        }
    });
}
$("#cpc-uploadBtn").click(function (evt) {
                var data;
                data = new FormData();
                data.append('file', $('#cpc-upload')[0].files[0]);
                _upload(data);

            });

HTMLパート

    <input id="cpc-upload" name="file" type="file" />
    <button id="cpc-uploadBtn" type="button">Upload</button>

編集

フォーム送信とフォームデータを使用せずにこれを行う他の方法はありますか？

4

3 に答える 3

2

Safari / Firefox（これらのサポートのみ）を使用していると仮定すると、呼び出しFormDataを変更する必要があります。$.ajax

$.ajax({
    url: './myURI',
    data: filedata,
    type: 'POST',
    contentType: false,
    processData: false,
    success: function (data) {
        alert(data);
    }
});

オプションをfalsecontentTypeにすると、jQueryはContent-Typeヘッダーを追加しなくなります（そうしないと、境界文字列が追加されなくなります）。また、processDatajQueryがFormData文字列に変換しようとしないように、フラグをfalseに設定する必要があります。

クライアントがHTML5を使用していることがわかっている場合は、新しいJavaScriptFileAPIを使用してみてください。次の記事を確認してください。

他のすべての場合、たとえば、カスタムプラグインを使用する必要があります。

于 2012-11-20T12:35:29.977 に答える
0

現在、FormDataオブジェクトはSafari / Firefoxでのみサポートされていると思いますが、ほとんどのブラウザではまだ採用されていません。

私は最近、asp.net用のajaxファイルアップローダーを見つけるのに苦労しました。現在、プロジェクトでこれを使用しています。

https://github.com/valums/file-uploader

于 2012-11-20T12:23:45.173 に答える
0

使用したい場合は小さな代替手段があります

<script>
    // wait for the DOM to be loaded
    $(document).ready(function() 
    {
        // bind 'myForm' and provide a simple callback function
       $("#tempForm").ajaxForm({
       url:'../calling action or servlet',
       type:'post',
       beforeSend:function()
       {
         alert("perform action before making the ajax call like showing soinner image");
       },
       success:function(e){
        alert("data is"+e);
            alert("now do whatever you want with the data");
       }
       });
    });
</script>

ここでプラグインを見つけることができます

于 2012-11-20T12:30:38.057 に答える