Загрузка файлов без формы

Question

Без каких-либо форм, могу ли я просто отправить файл/файлы с <input type="file"> в 'upload.php', используя метод POST с помощью jQuery. Входной тег не находится внутри тега формы. Он стоит индивидуально. Поэтому я не хочу использовать плагины jQuery, такие как «ajaxForm» или «ajaxSubmit».

Answer 1

Попробуйте 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'); 

    } 
}); 

Answer 2

Базирование на this tutorial, здесь очень простой способ сделать это:

$('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){ 
      ... 
     } 
     ... 
    }); 
}); 

Не забудьте добавить правильную обработку ошибок

Answer 3

Вы можете использовать FormData, чтобы отправить свои данные по запросу POST. Вот простой пример:

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 
}); 

Вы не должны использовать форму, чтобы сделать запрос AJAX, до тех пор, как вы знаете, ваши настройки запроса (например, данные URL, метода и параметров).