我想用jQuery异步上传文件。
$（文档）.ready（函数（）{$（“#uploadbutton”）.click（函数（）{var filename=$（“#file”）.val（）；$.ajax美元({类型：“POST”，url:“addFile.do”，enctype:'多部分/表单数据'，数据：{文件：文件名},成功：函数（）{alert（“上传的数据：”）；}});});});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js“></script><span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input id=“uploadbutton”type=“button”value=“Upload”/>
我只得到文件名，而不是上传文件。我可以做什么来解决这个问题？
当前回答
我一直在使用下面的脚本来上传图像，这很好。
HTML
<input id="file" type="file" name="file"/>
<div id="response"></div>
JavaScript
jQuery('document').ready(function(){
var input = document.getElementById("file");
var formdata = false;
if (window.FormData) {
formdata = new FormData();
}
input.addEventListener("change", function (evt) {
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
//showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("image", file);
formdata.append("extra",'extra-data');
}
if (formdata) {
jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');
jQuery.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
jQuery('div#response').html("Successfully uploaded");
}
});
}
}
else
{
alert('Not a vaild image!');
}
}
}, false);
});
解释
我使用response div显示上传动画和上传完成后的响应。
最好的部分是，当您使用此脚本时，可以随文件发送额外的数据，如id等。我在脚本中提到了额外的数据。
在PHP级别，这将作为正常的文件上传工作。额外数据可以作为$_POST数据检索。
这里你没有使用插件之类的东西。您可以根据需要更改代码。你不是盲目地在这里编码。这是任何jQuery文件上传的核心功能。实际上是Javascript。
其他回答
您可以通过JavaScript使用更新的Fetch API。这样地：
function uploadButtonCLicked(){
var input = document.querySelector('input[type="file"]')
fetch('/url', {
method: 'POST',
body: input.files[0]
}).then(res => res.json()) // you can do something with response
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
}
优点：所有现代浏览器都支持Fetch API，因此您不必导入任何内容。此外，请注意，fetch（）返回Promise，然后使用.then（..代码处理响应..）异步处理Promise。
我一直在使用下面的脚本来上传图像，这很好。
HTML
<input id="file" type="file" name="file"/>
<div id="response"></div>
JavaScript
jQuery('document').ready(function(){
var input = document.getElementById("file");
var formdata = false;
if (window.FormData) {
formdata = new FormData();
}
input.addEventListener("change", function (evt) {
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
//showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("image", file);
formdata.append("extra",'extra-data');
}
if (formdata) {
jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');
jQuery.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
jQuery('div#response').html("Successfully uploaded");
}
});
}
}
else
{
alert('Not a vaild image!');
}
}
}, false);
});
解释
我使用response div显示上传动画和上传完成后的响应。
最好的部分是，当您使用此脚本时，可以随文件发送额外的数据，如id等。我在脚本中提到了额外的数据。
在PHP级别，这将作为正常的文件上传工作。额外数据可以作为$_POST数据检索。
这里你没有使用插件之类的东西。您可以根据需要更改代码。你不是盲目地在这里编码。这是任何jQuery文件上传的核心功能。实际上是Javascript。
为此，我建议使用Fine Uploader插件。您的JavaScript代码为：
$(document).ready(function() {
$("#uploadbutton").jsupload({
action: "addFile.do",
onComplete: function(response){
alert( "server response: " + response);
}
});
});
var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);
$.ajax({
url:"page.php",
data:formData,
type: 'POST',
dataType:"JSON",
cache: false,
contentType: false,
processData: false,
success:function(data){ }
});
您可以使用表单数据发布包括图像在内的所有值。
您可以在这里看到一个工作演示的解决方案，该演示允许您预览表单文件并将其提交到服务器。对于您的情况，您需要使用Ajax来促进文件上传到服务器：
<from action="" id="formContent" method="post" enctype="multipart/form-data">
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>
</form>
提交的数据是表单数据。在jQuery上，使用表单提交函数而不是单击按钮提交表单文件，如下所示。
$(document).ready(function () {
$("#formContent").submit(function(e){
e.preventDefault();
var formdata = new FormData(this);
$.ajax({
url: "ajax_upload_image.php",
type: "POST",
data: formdata,
mimeTypes:"multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(){
alert("successfully submitted");
});
});
});
查看更多详细信息
