//$(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
}
});
});
$('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){
...
}
...
});
});
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);
}
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');
});
}
};
}]);
7条答案
按热度按时间r7xajy2e1#
您可以使用FormData通过POST请求提交数据。下面是一个简单的示例:
你不必使用表单来发出 AJAX 请求,只要你知道你的请求设置(比如url,方法和参数数据)。
dy1byipe2#
这里的所有答案仍然使用FormData API,就像
"multipart/form-data"
上传没有表单一样,您也可以使用xmlHttpRequest
将文件直接作为POST
请求主体内的内容上传,如下所示:Content-Type
和Content-Disposition
报头用于解释我们发送的内容(mime类型和文件名)。我也发布了类似的答案here。
更新(2023年1月):
您还可以使用
the Fetch API
将文件直接作为二进制内容上传(正如评论中所建议的)。另请参阅此处的相关问题:https://stackoverflow.com/a/48568899/1697459
sxpgvts33#
步骤1:创建HTML页面,放置HTML代码.
步骤2:在HTML代码页底部(页脚)创建Javascript:并将Jquery代码放入Script标记中。
步骤3:创建PHP文件和php代码复制过去。在
$.ajax
中的Jquery代码之后代码url应用你的php文件名上的哪一个。6ojccjat4#
基于this tutorial,这里有一个非常基本的方法来实现这一点:
不要忘记添加适当的错误处理
c0vxltue5#
试试这个puglin simpleUpload,不需要表格
网址:
Javascript:
mlmc2os56#
非jquery(React)版本:
联属萨摩亚
HTML/JSX格式:
您可能不想使用onChange,但是可以将上载部分附加到任何其他函数。
mctunoxg7#
抱歉,我是那个家伙,但AngularJS提供了一个简单而优雅的解决方案。
下面是我使用的代码:
在服务器端,我有一个MVC控制器,它的操作是保存在Request.files集合中找到的上传文件,并返回一个JsonResult。
如果你使用AngularJS试试这个,如果你不...对不起伙计:-)