小开

最佳答案

通过AJAX可以没有上传文件。
您可以使用IFrame上传文件，而无需刷新页面。
您可以查看更多详细信息这里。

更新

使用XHR2，支持通过AJAX上传文件。例如。通过FormData对象，但不幸的是，并非所有/旧浏览器都支持它。

FormData支持从以下桌面浏览器版本开始。

ie10+
Firefox 4.0+
Chrome7+
Safari5+
Opera 12+

有关详细信息，请参阅mdn链接。

小开

使用隐藏的ifram并将表单的目标设置为该ifram的名称。这样，当表单提交时，只会刷新ifram。
为ifram的加载事件注册一个事件处理程序以解析响应。

小开

使用XMLHttpRequest()确实可以进行AJAX上传。不需要iframe。可以显示上传进度。

有关详细信息，请参阅：问题jQuery上传进度和AJAX文件上传的答案https://stackoverflow.com/a/4943774/873282。

小开

通过ajax上传文件不再需要Ifram。我最近自己做的。查看这些页面：

通过AJAX和jQuery使用HTML5文件上传

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 valuesformData.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 uploadupload.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;}

小开

如果你想这样做：

$.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

这可能是你的解决方案。

小开

$("#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) {// ...},});});

编辑：注意内容类型和处理数据您可以简单地使用它通过Ajax上传文件……提交输入不能在表单元素之外：）

小开

这是我正在思考的一个想法：

Have an iframe on page and have a referencer.

有一个将输入类型文件元素移动到的表单。

Form:  A processing page AND a target of the FRAME.

结果将发布到ifram，然后您可以将获取的数据向上发送到您想要的图像标签，如下所示：

data:image/png;base64,asdfasdfasdfasdfa

页面加载。

我相信它对我有用，根据你的情况，你可能会做一些事情，比如：

.aftersubmit(function(){stopPropagation(); // or some other code which would prevent a refresh.});

小开

您可以使用ajaxSubmit方法如下：）当您选择需要上传到服务器的文件时，表单将提交到服务器：）

$(document).ready(function () {var options = {target: '#output',   // target element(s) to be updated with server responsetimeout: 30000,error: function (jqXHR, textStatus) {$('#output').html('have any error');return false;}},success: afterSuccess,  // post-submit callbackresetForm: true// reset the form after successful submit};
$('#idOfInputFile').on('change', function () {$('#idOfForm').ajaxSubmit(options);// always return false to prevent standard browser submit and page navigationreturn false;});});

小开

我很晚了，但是我正在寻找一个基于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 datacontentType: 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中演示的两个自定义字段。

Upload.php

<?phpif ($_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";}?>

小开

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 datacontentType: false,  // tell jQuery not to set contentTypesuccess : function(data) {console.log(data);alert(data);}});

如您所见，您必须创建一个FormData对象，空或从（序列化？-$('#yourForm').serialize())现有表单，然后附加输入文件。

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

小开

是的，您可以，只需使用javascript来获取文件，确保您将文件读取为数据URL。解析base 64之前的内容以实际获取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"]));

当然，您可能希望进行一些验证，例如检查您正在处理的文件类型等，但这就是我们的想法。

小开

我已经实现了一个多文件选择与即时预览和上传后，通过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 selectorvar files = file_selector.files;//Container of image previewsvar imageContainer = $(file_selector).next('table.imagePreviewTable');//Number of images selectedvar number_of_images = files.length;//Build image preview rowvar 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 imagesvar imageCount = $('.previewImage').length;//Get all multi select inputsvar fileInputs = document.querySelectorAll('.multipleImageFileInput');//Url where the image is to be uploadedvar url= "/upload-directory/";//Get number of inputsvar 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 objectformData.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 previewfor (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 uploadedvar 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 uploadednumber_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;}

小开

简单上传表单

<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>

小开

我已经在一个简单的代码中处理了这些。您可以从<强>这里下载一个工作演示

对于您的情况，这些都是非常可能的。我将逐步介绍如何使用AJAX jQuery将文件上传到服务器。

首先，让我们创建一个超文本标记语言文件来添加如下所示的表单文件元素。

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

你完成了。查看更多

小开

如果您想使用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');}}

这是上传文件的超文本标记语言

<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>

小开

要使用jQuery上传用户作为表单的一部分提交的文件，请按照以下代码操作：

var formData = new FormData();formData.append("userfile", fileInputElement.files[0]);

然后将表单数据对象发送到服务器。

我们还可以将File或Blob直接附加到FormData对象。

data.append("myfile", myBlob, "filename.txt");

小开

要获取所有表单输入，包括type="file"，您需要使用FormData对象。提交表单后，您将能够在调试器->网络->标头中看到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");});

小开

<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 sendtype: "POST", // Type of request to be send, called as methoddata: 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 cachedprocessData:false, // To send DOMDocument or non processed data file it is set to falsesuccess: 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>

小开

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

小开

使用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");}});});

小开

这是我如何得到这个工作：

超文本标记语言

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

小开

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']

小开

使用纯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)" >

In server side you can read original file name (and other info) which is automatically included to request.
You do NOT need to set header "Content-Type" to "multipart/form-data" browser will set it automatically
This solutions should work on all major browsers.

Here is more developed snippet with error handling, timeout and additional json sending

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() // timeoutsetTimeout(() => 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>

小开

使用FormData。它工作得很好：-）…

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 toocontentType: 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 hereconsole.log(jqXHR);console.log(status);console.log(error);}});

小开

$("#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（“您的响应”）；”

小开

<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 datacontentType: false, // tell jQuery not to set contentTypesuccess: 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);}

小开

这是我的代码，它的工作原理

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文件上传

更新

使用纯js更容易