无表格档案上载

试试这个普格林 SimpleUpload，不需要形式

网址:

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


}
});

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

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

只要您知道自己的请求设置(比如 URL、方法和参数数据) ，就不必使用表单来发出 ajax 请求。

Sorry for being 那个人 but AngularJS offers a simple and elegant solution.

下面是我使用的代码:

ngApp.controller('ngController', ['$upload',
function($upload) {


$scope.Upload = function($files, index) {
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
$scope.upload = $upload.upload({
file: file,
url: '/File/Upload',
data: {
id: 1 //some data you want to send along with the file,
name: 'ABC' //some data you want to send along with the file,
},


}).progress(function(evt) {


}).success(function(data, status, headers, config) {
alert('Upload done');
}
})
.error(function(message) {
alert('Upload failed');
});
}
};
}]);

.Hidden {
display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div data-ng-controller="ngController">
<input type="button" value="Browse" onclick="$(this).next().click();" />
<input type="file" ng-file-select="Upload($files, 1)" class="Hidden" />
</div>

在服务器端，我有一个 MVC 控制器与一个行动，保存上传的文件中的请求。文件集合并返回一个 JsonResult。

如果你使用 AngularJS 试试这个，如果你不... 对不起，伙计: -)

这里的所有答案仍然使用 表单数据 API。这就像一个没有表单的 "multipart/form-data"上传。您还可以使用 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);

Content-Type和 Content-Disposition头用于解释我们发送的内容(mime-type 和文件名)。

我也发布了类似的答案 给你。

步骤1: 创建放置 HTML 代码的 HTML 页面。

步骤2: 在 HTML 代码页底部(页脚)创建 Javascript: 并将 Jquery 代码放在 Script 标记中。

步骤3: 创建 PHP 文件并复制过去的 PHP 代码。Jquery Code in $.ajax Code url application which one on your php file name.

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

超文本标示语言

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

菲利普

print_r($_FILES);
print_r($_POST);

非 jquery (做出反应)版本:

约翰逊:

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

HTML/JSX:

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

您可能不想使用 onChange，但是可以将上传部分附加到任何其他函数。