在不使用任何形式的情况下,我可以<input type="file">
使用 jQuery 使用 POST 方法将文件/文件从“upload.php”发送到“upload.php”。输入标签不在任何表单标签内。它独立存在。所以我不想使用像“ajaxForm”或“ajaxSubmit”这样的 jQuery 插件。
无格式文件上传
IT技术
javascript
jquery
html
2021-01-17 05:37:27
6个回答
您可以使用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、方法和参数数据)。
这里的所有答案仍然使用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 类型和文件名)。
我也在这里发布了类似的答案。
基于本教程,这里有一个非常基本的方法来做到这一点:
$('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){
...
}
...
});
});
不要忘记添加适当的错误处理
第 1 步:创建 HTML 页面以放置 HTML 代码。
步骤 2:在 HTML 代码页底部(页脚)创建 Javascript:并将 Jquery 代码放入 Script 标签中。
第 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" />
php
print_r($_FILES);
print_r($_POST);
试试这个 puglin 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');
}
});
其它你可能感兴趣的问题