没有表格的文件上传

Question

不使用任何形式，我可以<input type="file">使用jQuery使用POST方法将文件从发送到“ upload.php”。输入标签不在任何表单标签内。它单独站立。所以我不想使用jQuery插件，例如“ ajaxForm”或“ ajaxSubmit”。

Answer 1

您可以使用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

});

只要知道请求设置（例如url，方法和参数数据），就不必使用表单来发出ajax请求。

Answer 2

此处的所有答案仍在使用FormData API。就像"multipart/form-data"没有表格的上传一样。您还可以使用以下命令将文件作为内容直接上传到POST请求的正文中xmlHttpRequest：

var xmlHttpRequest = new XMLHttpRequest();

var file = ...file handle...

var fileName = ...file name...

var target = ...target...

var mimeType = ...mime type...

xmlHttpRequest.open('POST', target, true);

xmlHttpRequest.setRequestHeader('Content-Type', mimeType);

xmlHttpRequest.setRequestHeader('Content-Disposition', 'attachment; filename="' + fileName + '"');

xmlHttpRequest.send(file);

Content-Type和Content-Disposition标头用于解释我们要发送的内容（MIME类型和文件名）。

我也在这里发布了类似的答案。

Answer 3

基于本教程，这里有一个非常基本的方法：

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

            ...

        }

        ...

    }); 

});

不要忘记添加适当的错误处理