フォームなしのファイルアップロード

フォームを一切使用せずに、<input type="file"> から 'upload.php'へ jQueryを使ってPOSTメソッドでファイルを送信することができます。inputタグは、どのformタグの中にも入っていません。個々に独立しています。そのため、jQueryプラグインの 'ajaxForm'や 'ajaxSubmit'などは使いたくありません。

Huangism
編集された質問 6日 10月 2014 в 6:57
プログラミング
javascript html jquery
27日 10月 2013 в 12:25
16 ビュー

POSTリクエストでデータを送信するには、FormDataを使用します。以下に簡単な例を示します。

var myFormData = new FormData();
myFormData.append('pictureFile', pictureInput.files[0]);

$.ajax({
  url: 'upload.php',
  type: 'POST',
  processData: false, // important
  contentType: false, // important
  dataType : 'json',
  data: myFormData
});

リクエストの設定(URL、メソッド、パラメータデータなど)がわかっていれば、ajaxリクエストを行うためにフォームを使用する必要はありません。

AbdelHady
編集した答え 13日 5月 2015 в 8:37
解説 (6)

このチュートリアル]1を参考に、非常に基本的な方法をご紹介します。

$('your_trigger_element_selector').on('click', function(){    
    var data = new FormData();
    data.append('input_file_name', $('your_file_input_selector').prop('files')[0]);
    // append other variables to data if you want: data.append('field_name_x', field_value_x);

    $.ajax({
        type: 'POST',               
        processData: false, // important
        contentType: false, // important
        data: data,
        url: your_ajax_path,
        dataType : 'json',  
        // in PHP you can call and process file in the same way as if it was submitted from a form:
        // $_FILES['input_file_name']
        success: function(jsonData){
            ...
        }
        ...
    }); 
});

適切なエラー処理を追加することを忘れないでください。

Amazzing
編集した答え 25日 10月 2014 в 8:26
解説 (0)

このpuglin simpleUploadを試してみてください、フォームは必要ありません。

Html:

<input type="file" name="arquivo" id="simpleUpload" multiple >
Enviar

Javascriptです。

$('#simpleUpload').simpleUpload({
  url: 'upload.php',
  trigger: '#enviar',
  success: function(data){
    alert('Envio com sucesso');

  }
});
解説 (0)