Javascript 无格式文件上传

在不使用任何表单的情况下，我可以使用jQuery的POST方法将文件从

发送到'upload.php'。输入标记不在任何表单标记内。它独立存在。所以我不想使用像“ajaxForm”或“ajaxSubmit”这样的jQuery插件。

试试这个puglin，无需表单

Html:

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

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

---

不要忘记添加正确的错误处理

您可以使用表单数据通过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、方法和参数数据）。

很抱歉，AngularJS提供了一个简单而优雅的解决方案

以下是我使用的代码：

ngApp.controller（'ngController'，['$upload'，
功能（$upload）{
$scope.Upload=函数（$files，index）{
对于（变量i=0；i<$files.length；i++）{
var file=$files[i]；
$scope.upload=$upload.upload({
档案：档案，
url:“/File/Upload”，
数据：{
id:1//您希望随文件一起发送的某些数据，
name:'ABC'//要随文件一起发送的某些数据，
},
}).进度（功能（evt）{
}).success（函数（数据、状态、标题、配置）{
警报（“上传完成”）；
}
})
.错误（功能（消息）{
警报（“上传失败”）；
});
}
};
}]);
。隐藏{
显示：无
}
此处的所有答案仍在使用。它就像一个没有表单的
“多部分/表单数据”
上传。您还可以使用
xmlHttpRequest
将文件作为内容直接上载到
POST
请求的正文中，如下所示：

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

内容类型
和
内容处置
标题用于解释我们发送的内容（mime类型和文件名）

我也发布了类似的答案。
步骤1：创建HTML页面，在其中放置HTML代码

步骤2：在HTML代码页面底部（页脚）创建Javascript:并将Jquery代码放入脚本标记中

步骤3：创建PHP文件并复制PHP代码。在$.ajax代码url中的Jquery代码之后，在php文件名上应用哪一个

JS

//$(document).on("change", "#avatar", function() {   // If you want to upload without a submit button 
$(document).on("click", "#upload", function() {
  var file_data = $("#avatar").prop("files")[0]; // Getting the properties of file from file field
  var form_data = new FormData(); // Creating object of FormData class
  form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data
  form_data.append("user_id", 123) // Adding extra parameters to form_data
  $.ajax({
    url: "/upload_avatar", // Upload Script
    dataType: 'script',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data, // Setting the data attribute of ajax with file_data
    type: 'post',
    success: function(data) {
      // Do something after Ajax completes 
    }
  });
});

HTML

<input id="avatar" type="file" name="avatar" />
<button id="upload" value="Upload" />

非jquery（React）版本：

JS:

function fileInputUpload(e){

    let formData = new FormData();
    formData.append(e.target.name, e.target.files[0]);

    let response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });

    let result = await response.json();

    console.log(result.message);
}

<input type='file' name='fileInput' onChange={(e) => this.fileInput(e)} />

HTML/JSX:

function fileInputUpload(e){

    let formData = new FormData();
    formData.append(e.target.name, e.target.files[0]);

    let response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });

    let result = await response.json();

    console.log(result.message);
}

<input type='file' name='fileInput' onChange={(e) => this.fileInput(e)} />

this.fileInput（e）}/>

您可能不想使用onChange，但可以将上载部分附加到任何其他函数。
尝试以下操作：但使用flash版本。来吧，扔你的石头。我不确定HTML5版本是否可以在没有表单的情况下工作。可能会，但我不确定。啊。。。。我想说它应该在HTML5中工作。但耶拉将充斥着平台兼容性问题和几年前的浏览器。创建一个表单或者从虚空动态生成表单有什么坏处？我认为这是最好的解决方案，但是另一个选择是使用Yes，这是真的。旧浏览器不支持FormData和ajax上传文件，如果要在这些浏览器上使用iframe作为后备解决方案，请不要忘记将
processData:false
和
contentType:false
添加到设置对象，否则您将收到未捕获的类型错误：非法调用，您救了我的命！！：D谢谢@monshi和@jsmiff。（SOF不允许多个用户在同一条评论中使用）。这张图片的输入是什么？请为您的代码添加一些评论/说明
，在
之后键入：'post'
make my day:）谢谢扫描您将文件上传到
tmp
目录，直到整个表单提交为止？（假设它是一个多表单）？我将如何在java代码中引用这些表单变量，因为它与$upload指令不兼容。这是一个很好的答案。它完全避免了表单数据的使用。对于xmlHttpRequest的用法，我可以再补充一点。XMLHttpRequest允许执行异步操作，而不会阻塞客户端（UI页面）。当使用HTML表单时，客户端（UI页面）在执行操作时被阻止。关于
fetch（）
？@VitalyZdanevich不确定这是什么意思？@Harry，我相信您知道AJAX，这里使用的大多数答案，也依赖于xmlHttpRequest。如果您使用FormData（）而不是用HTML编写实际的表单，那么就没有阻塞。干杯
<input type='file' name='fileInput' onChange={(e) => this.fileInput(e)} />