フォームを一切使用せずに、<input type="file">
から 'upload.php'へ jQueryを使ってPOSTメソッドでファイルを送信することができます。inputタグは、どのformタグの中にも入っていません。個々に独立しています。そのため、jQueryプラグインの 'ajaxForm'や 'ajaxSubmit'などは使いたくありません。
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リクエストを行うためにフォームを使用する必要はありません。
このチュートリアル]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){
...
}
...
});
});
適切なエラー処理を追加することを忘れないでください。
このpuglin simpleUploadを試してみてください、フォームは必要ありません。
Html:
<input type="file" name="arquivo" id="simpleUpload" multiple >
<button type="button" id="enviar">Enviar</button>
Javascriptです。
$('#simpleUpload').simpleUpload({
url: 'upload.php',
trigger: '#enviar',
success: function(data){
alert('Envio com sucesso');
}
});