jQuery Ajax 文件上传
Posted
技术标签:
【中文标题】jQuery Ajax 文件上传【英文标题】：jQuery Ajax File Upload 【发布时间】：2021-12-25 18:08:05 【问题描述】：我可以使用以下 jQuery 代码通过 ajax 请求的 POST 方法执行文件上传吗？
$.ajax(
type: "POST",
timeout: 50000,
url: url,
data: dataString,
success: function (data)
alert('success');
return false;
);
如果可能，我需要填写data 部分吗？这是正确的方法吗？我只将文件 POST 到服务器端。
我一直在谷歌搜索，但我发现是一个插件，而在我的计划中我不想使用它。至少目前是这样。
【问题讨论】：
Ajax 不支持文件上传，你应该改用 iframe 相关问题：***.com/questions/6974684/… 相关：***.com/questions/166221/… 【参考方案1】：不能通过 AJAX 上传文件。
您可以使用IFrame上传文件，无需刷新页面。
您可以查看更多详细信息here。
更新
XHR2 支持通过 AJAX 上传文件。例如。通过FormData 对象，但不幸的是，并非所有/旧浏览器都支持它。
FormData 支持从以下桌面浏览器版本开始。
更多详情，请参阅MDN link。
【讨论】：
这里是不支持的特定浏览器的列表：caniuse.com/#search=FormData 另外我还没有测试过，但这里是 FormData 的 polyfill gist.github.com/3120320 具体来说，IE @Synexis 不，我们不必再等那么久，因为所有 IE 仅拥有 22% 的全球市场份额和 27% 在美国的市场份额，而且还在快速下降。很有可能是70岁以上的人。因此，与其让 IE 决定开发人员必须做什么，IE 要么必须调整，要么退出竞争。 @DrewCalder 大多数 IE 用户是上班族，由于公司政策，他们无法选择使用哪种浏览器。我认为年龄与它没有太大关系。我猜大多数人 > 70 让他们的后代安装 Chrome 或 FF 代替:) This link 确实帮助我理解了最低限度。我不必使用 xhr 请求。如果您确实使用 ajax，请确保将enctype 设置为 "form/multipart"!【参考方案2】：
通过 ajax 上传文件不再需要 iframe。我最近自己做了。查看这些页面：
Using html5 file uploads with AJAX and jQuery
http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface
更新了答案并清理了它。使用 getSize 函数检查大小或使用 getType 函数检查类型。 添加进度条 html 和 css 代码。
var Upload = function (file)
this.file = file;
;
Upload.prototype.getType = function()
return this.file.type;
;
Upload.prototype.getSize = function()
return this.file.size;
;
Upload.prototype.getName = function()
return this.file.name;
;
Upload.prototype.doUpload = function ()
var that = this;
var formData = new FormData();
// add assoc key values, this will be posts values
formData.append("file", this.file, this.getName());
formData.append("upload_file", true);
$.ajax(
type: "POST",
url: "script",
xhr: function ()
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload)
myXhr.upload.addEventListener('progress', that.progressHandling, false);
return myXhr;
,
success: function (data)
// your callback here
,
error: function (error)
// handle error
,
async: true,
data: formData,
cache: false,
contentType: false,
processData: false,
timeout: 60000
);
;
Upload.prototype.progressHandling = function (event)
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
var progress_bar_id = "#progress-wrp";
if (event.lengthComputable)
percent = Math.ceil(position / total * 100);
// update progressbars classes so it fits your code
$(progress_bar_id + " .progress-bar").css("width", +percent + "%");
$(progress_bar_id + " .status").text(percent + "%");
;
如何使用上传类
//Change id to your id
$("#ingredient_file").on("change", function (e)
var file = $(this)[0].files[0];
var upload = new Upload(file);
// maby check size or type here with upload.getSize() and upload.getType()
// execute upload
upload.doUpload();
);
进度条html代码
<div id="progress-wrp">
<div class="progress-bar"></div>
<div class="status">0%</div>
</div>
进度条css代码
#progress-wrp
border: 1px solid #0099CC;
padding: 1px;
position: relative;
height: 30px;
border-radius: 3px;
margin: 10px;
text-align: left;
background: #fff;
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
#progress-wrp .progress-bar
height: 100%;
border-radius: 3px;
background-color: #f39ac7;
width: 0;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
#progress-wrp .status
top: 3px;
left: 50%;
position: absolute;
display: inline-block;
color: #000000;
【讨论】：
您可以或多或少地直接复制代码并使用它。只需更改一些 id 名称和类名。任何自定义都是你自己的。 请注意，myXhr 似乎是全局的以及名称、大小和类型。此外，最好使用“beforeSend”来扩充已经创建的 XMLHttpRequest 对象，而不是使用“xhr”创建一个然后更改它。 我认为我们不能像@Ziinloader 那样使用它。您正在使用一些不包括在内的本地方法：writer(catchFile)。 writer() 是什么？
如果数据还包含几个字段以及要上传的文件怎么办？
@Ziinloader 这是一个非常有用的示例，我看到您已经多次返回并维护它。真正的答案比我能给的一个赞成票更有价值。【参考方案3】：
Ajax 发布和上传文件是可能的。我正在使用jQuery $.ajax 函数来加载我的文件。我尝试使用 XHR 对象，但无法使用 php 在服务器端获得结果。
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax(
url : 'upload.php',
type : 'POST',
data : formData,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success : function(data)
console.log(data);
alert(data);
);
如您所见，您必须创建一个 FormData 对象，为空或从（序列化？-$('#yourForm').serialize()) 现有表单），然后附加输入文件。
这里有更多信息： - How to upload a file using jQuery.ajax and FormData - Uploading files via jQuery, object FormData is provided and no file name, GET request
对于 PHP 进程，您可以使用如下内容：
//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);
if($fileError == UPLOAD_ERR_OK)
//Processes your file here
else
switch($fileError)
case UPLOAD_ERR_INI_SIZE:
$message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
break;
case UPLOAD_ERR_FORM_SIZE:
$message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
break;
case UPLOAD_ERR_PARTIAL:
$message = 'Error: no terminó la acción de subir el archivo.';
break;
case UPLOAD_ERR_NO_FILE:
$message = 'Error: ningún archivo fue subido.';
break;
case UPLOAD_ERR_NO_TMP_DIR:
$message = 'Error: servidor no configurado para carga de archivos.';
break;
case UPLOAD_ERR_CANT_WRITE:
$message= 'Error: posible falla al grabar el archivo.';
break;
case UPLOAD_ERR_EXTENSION:
$message = 'Error: carga de archivo no completada.';
break;
default: $message = 'Error: carga de archivo no completada.';
break;
echo json_encode(array(
'error' => true,
'message' => $message
));
【讨论】：
运行这段代码需要参考什么jquery库？formData.append('file', $('#file')[0].files[0]); 返回undefined 和console.log(formData) 除了_proto_ 之外什么都没有
我得到了这个工作...捏我，我在 jQuery Ajax 文件上传天堂！ var formData = new FormData(); formData.append('file', document.getElementById('file').files[0]); $.ajax( url : $("form[name='uploadPhoto']").attr("action"), type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) console.log(data); alert(data); );
@RaymondWachaga 这是编码类型，不是加密类型。 :)
我真的在为此苦苦挣扎……经过数小时的研究等，我发现这确实很有帮助。谢了哥们！您解决方案的第一部分对我来说就像一个魅力。这正是我需要的:-)【参考方案4】：
简单的上传表单
<script>
//form Submit
$("form").submit(function(evt)
evt.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax(
url: 'fileUpload',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response)
alert(response);
);
return false;
);
</script><!--Upload Form-->
<form>
<table>
<tr>
<td colspan="2">File Upload</td>
</tr>
<tr>
<th>Select File </th>
<td><input id="csv" name="csv" type="file" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="submit"/>
</td>
</tr>
</table>
</form>【讨论】：
先生，此示例中使用的 js 是什么，是否有针对此的特定 jquery 插件..我有一个问题，我在这里被指出，你能检查我的问题吗..我想上传该项目中的多个文件或图像是链接***.com/questions/28644200/… $(this)[0] 是 this 发布文件的服务器参数是什么？能否请您发布服务器部分。 @FrenkyB 和其他 - 服务器上的文件（在 PHP 中）不存储在 $_POST 变量中 - 它们存储在 $_FILES 变量中。在这种情况下，您可以使用 $_FILES["csv"] 访问它，因为 "csv" 是输入标签的名称属性。【参考方案5】：我已经很晚了，但我一直在寻找基于 ajax 的图像上传解决方案，而我正在寻找的答案在这篇文章中有点分散。我确定的解决方案涉及 FormData 对象。我组装了我放在一起的代码的基本形式。您可以看到它演示了如何使用 fd.append() 向表单添加自定义字段，以及如何在 ajax 请求完成时处理响应数据。
上传html：
<!DOCTYPE html>
<html>
<head>
<title>Image Upload Form</title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function submitForm()
console.log("submit event");
var fd = new FormData(document.getElementById("fileinfo"));
fd.append("label", "WEBUPLOAD");
$.ajax(
url: "upload.php",
type: "POST",
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
).done(function( data )
console.log("PHP Output:");
console.log( data );
);
return false;
</script>
</head>
<body>
<form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
<label>Select a file:</label><br>
<input type="file" name="file" required />
<input type="submit" value="Upload" />
</form>
<div id="output"></div>
</body>
</html>
如果您使用 php，这里有一种处理上传的方法，包括使用上述 html 中演示的两个自定义字段。
上传.php
<?php
if ($_POST["label"])
$label = $_POST["label"];
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts))
if ($_FILES["file"]["error"] > 0)
echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
else
$filename = $label.$_FILES["file"]["name"];
echo "Upload: " . $_FILES["file"]["name"] . "<br>";
echo "Type: " . $_FILES["file"]["type"] . "<br>";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";
if (file_exists("uploads/" . $filename))
echo $filename . " already exists. ";
else
move_uploaded_file($_FILES["file"]["tmp_name"],
"uploads/" . $filename);
echo "Stored in: " . "uploads/" . $filename;
else
echo "Invalid file";
?>
【讨论】：
我收到Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, 为什么会这样，先生，我照原样复制粘贴您的代码
@HogRider - 如果你用谷歌搜索你的错误信息，这是第一个结果：***.com/questions/10752055/…你是通过file://在本地访问你的网页，而不是使用网络服务器？顺便说一句，在不了解代码的情况下盲目地简单地复制和粘贴代码并不是最佳实践。我建议您在使用代码之前逐行浏览代码以了解正在发生的事情。
@colincameron 感谢您澄清我所做的一些事情，我逐行通过它，我不太了解，所以我问了这个问题，以便有人可以澄清我的疑问。确切地说，我正在通过 xampp 使用本地。我可以问一个你可以澄清的问题吗？
@Brownman Revival ：我知道回复太晚了。您收到跨源错误，因为您将 html 文件作为文件打开而不是从服务器运行。
如何根据此代码中的选择应用表单操作？【参考方案6】：
使用XMLHttpRequest() 确实可以进行 AJAX 上传。不需要 iframe。可以显示上传进度。
详情见：回答https://***.com/a/4943774/873282问题jQuery Upload Progress and AJAX file upload。
【讨论】：
很遗憾 IE 当您只想参考另一个页面作为答案时，您可以投票关闭作为 dupkucate 或在问题下发表评论。这篇文章不是答案。此类帖子看起来像是在尝试扩大代表。【参考方案7】：我是这样工作的：
HTML
<input type="file" id="file">
<button id='process-file-button'>Process</button>
JS
$('#process-file-button').on('click', function (e)
let files = new FormData(), // you can consider this as 'data bag'
url = 'yourUrl';
files.append('fileName', $('#file')[0].files[0]); // append selected file to the bag named 'file'
$.ajax(
type: 'post',
url: url,
processData: false,
contentType: false,
data: files,
success: function (response)
console.log(response);
,
error: function (err)
console.log(err);
);
);
PHP
if (isset($_FILES) && !empty($_FILES))
$file = $_FILES['fileName'];
$name = $file['name'];
$path = $file['tmp_name'];
// process your file
【讨论】：
这对我帮助最大的是$('#file')[0].files[0]，这是一种奇怪的JS解决方法，不需要适当的<form>
这是完整的解决方案，PHP 位也有帮助。【参考方案8】：
使用纯js更容易
async function saveFile(inp)
let formData = new FormData();
formData.append("file", inp.files[0]);
await fetch('/upload/somedata', method: "POST", body: formData);
alert('success');
<input type="file" onchange="saveFile(this)" >这里是更发达的 sn-p，带有错误处理、超时和额外的 json 发送
async function saveFile(inp)
let user = name:'john', age:34 ;
let formData = new FormData();
let photo = inp.files[0];
formData.append("photo", photo);
formData.append("user", JSON.stringify(user));
const ctrl = new AbortController() // timeout
setTimeout(() => ctrl.abort(), 50000);
try
let r = await fetch('/upload/image',
method: "POST", body: formData, signal: ctrl.signal);
console.log('HTTP response code:',r.status);
alert('success');
catch(e)
console.log('Huston we have problem...:', e);
<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>【讨论】：
【参考方案9】：$("#submit_car").click(function()
var formData = new FormData($('#car_cost_form')[0]);
$.ajax(
url: 'car_costs.php',
data: formData,
contentType: false,
processData: false,
cache: false,
type: 'POST',
success: function(data)
// ...
,
);
);
edit：注意内容类型和处理数据 您可以简单地使用它通过 Ajax 上传文件......提交输入不能在表单元素之外:)
【讨论】：
使用此方法，您可以发布表单，但不能使用“文件”类型的字段。这个问题专门针对文件上传。 它是method: 'POST' 不是 type: 'POST'【参考方案10】：
如果你想这样做：
$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload)
if( progressEvent.lengthComputable)
var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
if( upload)
console.log( percent + ' uploaded');
else
console.log( percent + ' downloaded');
)
.done( function()
console.log( 'Finished upload');
);
比
https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js
可能是您的解决方案。
【讨论】：
$object里面的上传方法在哪里，上面的链接不存在 github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/… 感谢您发布您的答案！请务必仔细阅读FAQ on Self-Promotion。另请注意，每次链接到自己的网站/产品时，都要求发布免责声明。【参考方案11】：2019 年更新：
html
<form class="fr" method='POST' enctype="multipart/form-data"> % csrf_token %
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>
js
$(document).on('submit', '.fr', function()
$.ajax(
type: 'post',
url: url, <--- you insert proper URL path to call your views.py function here.
enctype: 'multipart/form-data',
processData: false,
contentType: false,
data: new FormData(this) ,
success: function(data)
console.log(data);
);
return false;
);
views.py
form = ThisForm(request.POST, request.FILES)
if form.is_valid():
text = form.cleaned_data.get("text")
example_image = request.FILES['example_image']
【讨论】：
这如何改进已经给出的任何答案？这个答案还提到了一个views.py文件，它是Django，与问题无关。【参考方案12】：使用表单数据。它工作得非常好:-) ...
var jform = new FormData();
jform.append('user',$('#user').val());
jform.append('image',$('#image').get(0).files[0]); // Here's the important bit
$.ajax(
url: '/your-form-processing-page-url-here',
type: 'POST',
data: jform,
dataType: 'json',
mimeType: 'multipart/form-data', // this too
contentType: false,
cache: false,
processData: false,
success: function(data, status, jqXHR)
alert('Hooray! All is well.');
console.log(data);
console.log(status);
console.log(jqXHR);
,
error: function(jqXHR,status,error)
// Hopefully we should never reach here
console.log(jqXHR);
console.log(status);
console.log(error);
);
【讨论】：
这就是：('user',$('#user').val()); 带有 id="user" 的文本框被附加到 @rahim.nagori 格式 更直接的方法：var jform = new FormData($('form').get(0)); 很好，谢谢，下次我用FormData的时候试试【参考方案13】： 使用隐藏的 iframe 并将表单的目标设置为该 iframe 的名称。这样，提交表单时，只会刷新 iframe。 为 iframe 的加载事件注册一个事件处理程序以解析响应。【讨论】：
尽可能避免使用 iframe @BhargavNanekalva 你有什么顾虑？ 我认为提交时会发出咔哒声......这更像是不适合 2020 年的解决方法，但可以在 IE 7 中使用【参考方案14】：我用一个简单的代码处理了这些。您可以从here 下载工作演示
对于您的情况，这些非常有可能。我将逐步指导您如何使用 AJAX jquery 将文件上传到服务器。
首先让我们创建一个 HTML 文件来添加如下表单文件元素，如下所示。
<form action="" id="formContent" method="post" enctype="multipart/form-data" >
<input type="file" name="file" required id="upload">
<button class="submitI" >Upload Image</button>
</form>
其次创建一个jquery.js文件并添加以下代码来处理我们的文件提交到服务器
$("#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("file successfully submitted");
,error: function()
alert("okey");
);
);
);
你已经完成了。 View more
【讨论】：
【参考方案15】：正如许多答案所示，使用 FormData 是一种可行的方法。这是一些非常适合此目的的代码。我也同意嵌套ajax块来完成复杂情况的评论。通过包括 e.PreventDefault();以我的经验，使代码更跨浏览器兼容。
$('#UploadB1').click(function(e)
e.preventDefault();
if (!fileupload.valid())
return false;
var myformData = new FormData();
myformData.append('file', $('#uploadFile')[0].files[0]);
$("#UpdateMessage5").html("Uploading file ....");
$("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");
myformData.append('mode', 'fileUpload');
myformData.append('myid', $('#myid').val());
myformData.append('type', $('#fileType').val());
//formData.append('myfile', file, file.name);
$.ajax(
url: 'include/fetch.php',
method: 'post',
processData: false,
contentType: false,
cache: false,
data: myformData,
enctype: 'multipart/form-data',
success: function(response)
$("#UpdateMessage5").html(response); //.delay(2000).hide(1);
$("#UpdateMessage5").css("background","");
console.log("file successfully submitted");
,error: function()
console.log("not okay");
);
);
【讨论】：
这通过 jquery validate 运行表单... if (!fileupload.valid()) return false; 【参考方案16】：在通过 ajax 从预览中删除不需要的文件后，我实现了具有即时预览和上传功能的多文件选择。
详细的文档可以在这里找到：http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html
演示：http://jsfiddle.net/anas/6v8Kz/7/embedded/result/
jsFiddle：http://jsfiddle.net/anas/6v8Kz/7/
Javascript：
$(document).ready(function()
$('form').submit(function(ev)
$('.overlay').show();
$(window).scrollTop(0);
return upload_images_selected(ev, ev.target);
)
)
function add_new_file_uploader(addBtn)
var currentRow = $(addBtn).parent().parent();
var newRow = $(currentRow).clone();
$(newRow).find('.previewImage, .imagePreviewTable').hide();
$(newRow).find('.removeButton').show();
$(newRow).find('table.imagePreviewTable').find('tr').remove();
$(newRow).find('input.multipleImageFileInput').val('');
$(addBtn).parent().parent().parent().append(newRow);
function remove_file_uploader(removeBtn)
$(removeBtn).parent().parent().remove();
function show_image_preview(file_selector)
//files selected using current file selector
var files = file_selector.files;
//Container of image previews
var imageContainer = $(file_selector).next('table.imagePreviewTable');
//Number of images selected
var number_of_images = files.length;
//Build image preview row
var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' +
'<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' +
'</tr> ');
//Add image preview row
$(imageContainer).html(imagePreviewRow);
if (number_of_images > 1)
for (var i =1; i<number_of_images; i++)
/**
*Generate class name of the respective image container appending index of selected images,
*sothat we can match images selected and the one which is previewed
*/
var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i);
$(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i);
$(imageContainer).append(newImagePreviewRow);
for (var i = 0; i < files.length; i++)
var file = files[i];
/**
* Allow only images
*/
var imageType = /image.*/;
if (!file.type.match(imageType))
continue;
/**
* Create an image dom object dynamically
*/
var img = document.createElement("img");
/**
* Get preview area of the image
*/
var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first');
/**
* Append preview of selected image to the corresponding container
*/
preview.append(img);
/**
* Set style of appended preview(Can be done via css also)
*/
preview.find('img').addClass('previewImage').css('max-width': '500px', 'max-height': '500px');
/**
* Initialize file reader
*/
var reader = new FileReader();
/**
* Onload event of file reader assign target image to the preview
*/
reader.onload = (function(aImg) return function(e) aImg.src = e.target.result; ; )(img);
/**
* Initiate read
*/
reader.readAsDataURL(file);
/**
* Show preview
*/
$(imageContainer).show();
function remove_selected_image(close_button)
/**
* Remove this image from preview
*/
var imageIndex = $(close_button).attr('imageindex');
$(close_button).parents('.imagePreviewRow_' + imageIndex).remove();
function upload_images_selected(event, formObj)
event.preventDefault();
//Get number of images
var imageCount = $('.previewImage').length;
//Get all multi select inputs
var fileInputs = document.querySelectorAll('.multipleImageFileInput');
//Url where the image is to be uploaded
var url= "/upload-directory/";
//Get number of inputs
var number_of_inputs = $(fileInputs).length;
var inputCount = 0;
//Iterate through each file selector input
$(fileInputs).each(function(index, input)
fileList = input.files;
// Create a new FormData object.
var formData = new FormData();
//Extra parameters can be added to the form data object
formData.append('bulk_upload', '1');
formData.append('username', $('input[name="username"]').val());
//Iterate throug each images selected by each file selector and find if the image is present in the preview
for (var i = 0; i < fileList.length; i++)
if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0)
var file = fileList[i];
// Check the file type.
if (!file.type.match('image.*'))
continue;
// Add the file to the request.
formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name);
// Set up the request.
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onload = function ()
if (xhr.status === 200)
var jsonResponse = JSON.parse(xhr.responseText);
if (jsonResponse.status == 1)
$(jsonResponse.file_info).each(function()
//Iterate through response and find data corresponding to each file uploaded
var uploaded_file_name = this.original;
var saved_file_name = this.target;
var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />';
file_info_container.append(file_name_input);
imageCount--;
)
//Decrement count of inputs to find all images selected by all multi select are uploaded
number_of_inputs--;
if(number_of_inputs == 0)
//All images selected by each file selector is uploaded
//Do necessary acteion post upload
$('.overlay').hide();
else
if (typeof jsonResponse.error_field_name != 'undefined')
//Do appropriate error action
else
alert(jsonResponse.message);
$('.overlay').hide();
event.preventDefault();
return false;
else
/*alert('Something went wrong!');*/
$('.overlay').hide();
event.preventDefault();
;
xhr.send(formData);
)
return false;
【讨论】：
@Bhargav：请参阅博客文章以获取解释：goo.gl/umgFFy。如果您仍有任何疑问，请回复我谢谢【参考方案17】：是的，您可以，只需使用 javascript 获取文件，确保您将文件作为数据 URL 读取。解析 base64 之前的内容以实际获取 base 64 编码数据，然后如果您使用 php 或任何后端语言，您可以解码 base 64 数据并保存到如下所示的文件中
Javascript:
var reader = new FileReader();
reader.onloadend = function ()
dataToBeSent = reader.result.split("base64,")[1];
$.post(url, data:dataToBeSent);
reader.readAsDataURL(this.files[0]);
PHP:
file_put_contents('my.pdf', base64_decode($_POST["data"]));
当然，您可能想要进行一些验证，例如检查您正在处理的文件类型以及类似的东西，但这就是我们的想法。
【讨论】：
file_put_contents($fname, file_get_contents($_POST['data'])); file_get_contents 处理解码和 data:// 标头【参考方案18】：要获取所有表单输入，包括 type="file"，您需要使用 FormData 对象。 提交表单后，您将能够在 debugger -> network ->Headers 中看到 formData 内容。
var url = "YOUR_URL";
var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);
$.ajax(url,
method: 'post',
processData: false,
contentType: false,
data: formData
).done(function(data)
if (data.success)
alert("Files uploaded");
else
alert("Error while uploading the files");
).fail(function(data)
console.log(data);
alert("Error while uploading the files");
);
【讨论】：
【参考方案19】：<html>
<head>
<title>Ajax file upload</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function (e)
$("#uploadimage").on('submit', (function(e)
e.preventDefault();
$.ajax(
url: "upload.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
alert(data);
);
));
</script>
</head>
<body>
<div class="main">
<h1>Ajax Image Upload</h1><br/>
<hr>
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="image_preview"><img id="previewing" src="noimage.png" /></div>
<hr id="line">
<div id="selectImage">
<label>Select Your Image</label><br/>
<input type="file" name="file" id="file" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
</div>
</body>
</html>
【讨论】：
【参考方案20】：要上传用户使用 jquery 作为表单的一部分提交的文件，请遵循以下代码：
var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);
然后将表单数据对象发送到服务器。
我们还可以将文件或 Blob 直接附加到 FormData 对象。
data.append("myfile", myBlob, "filename.txt");
【讨论】：
【参考方案21】：您可以使用方法 ajaxSubmit 如下:) 当您选择需要上传到服务器的文件时，表单将提交到服务器:)
$(document).ready(function ()
var options =
target: '#output', // target element(s) to be updated with server response
timeout: 30000,
error: function (jqXHR, textStatus)
$('#output').html('have any error');
return false;
,
success: afterSuccess, // post-submit callback
resetForm: true
// reset the form after successful submit
;
$('#idOfInputFile').on('change', function ()
$('#idOfForm').ajaxSubmit(options);
// always return false to prevent standard browser submit and page navigation
return false;
);
);
【讨论】：
相信你说的是jquery form插件。除了您的答案缺乏细节之外，这确实是最好的选择。 @fotanus 你是对的！该脚本必须使用 jquery 表单插件来提交使用在 jquery 表单插件中定义的方法 ajaxSubmit【参考方案22】：如果您想使用 AJAX 上传文件，这里是您可以用于文件上传的代码。
$(document).ready(function()
var options =
beforeSubmit: showRequest,
success: showResponse,
dataType: 'json'
;
$('body').delegate('#image','change', function()
$('#upload').ajaxForm(options).submit();
);
);
function showRequest(formData, jqForm, options)
$("#validation-errors").hide().empty();
$("#output").css('display','none');
return true;
function showResponse(response, statusText, xhr, $form)
if(response.success == false)
var arr = response.errors;
$.each(arr, function(index, value)
if (value.length != 0)
$("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
);
$("#validation-errors").show();
else
$("#output").html("<img src='"+response.file+"' />");
$("#output").css('display','block');
这是上传文件的 HTML
<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off">
<input type="file" name="image" id="image" />
</form>
【讨论】：
【参考方案23】：var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax(
url: 'url',
type: 'POST',
data: dataform,
async: false,
success: function(res)
response data;
,
cache: false,
contentType: false,
processData: false
);
【讨论】：
你可以通过添加一些细节来改进你的答案【参考方案24】：这是我想到的一个想法：
Have an iframe on page and have a referencer.
有一个表单，您可以在其中将输入类型文件元素移动到。
Form: A processing page AND a target of the FRAME.
结果将发布到 iframe，然后您可以将获取的数据向上发送到您想要的图像标签，例如：
data:image/png;base64,asdfasdfasdfasdfa
然后页面加载。
我相信它对我有用，并且取决于您可能能够执行以下操作：
.aftersubmit(function()
stopPropagation(); // or some other code which would prevent a refresh.
);
【讨论】：
我看不出这如何改善之前给出的任何其他答案。它也是传播而不是传播！ ;)【参考方案25】：<input class="form-control cu-b-border" type="file" id="formFile">
<img id="myImg" src="#">
在js中
<script>
var formData = new FormData();
formData.append('file', $('#formFile')[0].files[0]);
$.ajax(
type: "POST",
url: '/GetData/UploadImage',
data: formData,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function (data)
console.log(data);
$('#myImg').attr('src', data);
,
error: function (xhr, ajaxOptions, thrownError)
)
</script>
在控制器中
public ActionResult UploadImage(HttpPostedFileBase file)
string filePath = "";
if (file != null)
string path = "/uploads/Temp/";
if (!Directory.Exists(Server.MapPath("~" + path)))
Directory.CreateDirectory(Server.MapPath("~" + path));
filePath = FileUpload.SaveUploadedFile(file, path);
return Json(filePath, JsonRequestBehavior.AllowGet);
【讨论】：
【参考方案26】：$("#form-id").submit(function (e)
e.preventDefault();
);
$("#form-id").submit(function (e)
var formObj = $(this);
var formURL = formObj.attr("action");
var formData = new FormData(this);
$.ajax(
url: formURL,
type: 'POST',
data: formData,
processData: false,
contentType: false,
async: true,
cache: false,
enctype: "multipart/form-data",
dataType: "json",
success: function (data)
if (data.success)
alert(data.success)
if (data.error)
alert(data.error)
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<form class="form-horizontal" id="form-id" action="masterFileController" enctype="multipart/form-data">
<button class="btn-success btn" type="submit" id="btn-save" >Submit</button>
</form>servlet 响应为 "out.print("your response");"
【讨论】：
【参考方案27】：这是我的代码，它可以工作
var formData = new FormData();
var files = $('input[type=file]');
for (var i = 0; i < files.length; i++)
if (files[i].value == "" || files[i].value == null)
return false;
else
formData.append(files[i].name, files[i].files[0]);
var formSerializeArray = $("#Form").serializeArray();
for (var i = 0; i < formSerializeArray.length; i++)
formData.append(formSerializeArray[i].name, formSerializeArray[i].value)
$.ajax(
type: 'POST',
data: formData,
contentType: false,
processData: false,
cache: false,
url: '/Controller/Action',
success: function (response)
if (response.Success == true)
return true;
else
return false;
,
error: function ()
return false;
,
failure: function ()
return false;
);
【讨论】：
以上是关于jQuery Ajax 文件上传的主要内容，如果未能解决你的问题，请参考以下文章