ajax如何上傳文件（整理）
一、總結
一句話總結：用FormData，FormData+ajax=異步上傳二進制文件
<form enctype="multipart/form-data"> <p>上傳csv文件<input type="file" id="csv_file" name="csv_file"/></p> <button id="import">導入</button> </form> <script type="application/javascript"> $("#import").click(function () { var files = $('#csv_file').prop('files'); var data = new FormData(); data.append('csv_file', files[0]); $.ajax({ type: 'POST', url: "http://xxxx/import_csv", data: data, cache: false, processData: false, contentType: false, success: function (ret) { alert(ret); } }); }); </script>
1、FormData是什么？
利用 FormData 對象，可以通過JavaScript鍵值對來模擬一系列表單控件，還可以使用 XMLHttpRequest的send() 方法來異步提交表單。
與普通的Ajax相比，使用FormData 的最大優點就是可以異步上傳二進制文件。
2、FormData+ajax上傳文件的注意事項？
$.ajax({ url: "upload.ashx", type: "POST", data: formData, /** *必須false才會自動加上正確的Content-Type */ contentType: false, /** * 必須false才會避開jQuery對 formdata 的默認處理 * XMLHttpRequest會對 formdata 進行正確的處理 */ processData: false, success: function (data) {
二、文件的上傳（表單上傳和ajax文件異步上傳）
項目中用戶上傳總是少不了的，下面就主要的列舉一下表單上傳和ajax上傳！注意： context.Request.Files不適合對大文件進行操作，下面列舉的主要對於小文件上傳的處理！
資源下載：
一.jQuery官方下載地址：https://jquery.com/download/
一.表單上傳：
html客戶端部分：
<form action="upload.ashx" method="post" enctype="multipart/form-data"> 選擇文件:<input type="file" name="file1" /><br /> <input type="submit" value="上傳" /> </form>
一般處理程序服務器端：
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; HttpPostedFile file1 = context.Request.Files["file1"]; helper.uploadFile(file1, "~/upload/");//這里就是對相應方法進行調用 context.Response.Write("ok");//提示執行成功 }
上傳代碼的封裝：
/// <summary> /// 上傳圖片 /// </summary> /// <param name="file">通過form表達提交的文件</param> /// <param name="virpath">文件要保存的虛擬路徑</param> public static void uploadImg(HttpPostedFile file,string virpath) { if (file.ContentLength > 1024 * 1024 * 4) { throw new Exception("文件不能大於4M"); } string imgtype = Path.GetExtension(file.FileName); if(imgtype!=".jpg"&&imgtype!=".jpeg") //圖片類型進行限制 { throw new Exception("請上傳jpg或JPEG圖片"); } using (Image img = Bitmap.FromStream(file.InputStream)) { string savepath = HttpContext.Current.Server.MapPath(virpath+file.FileName); img.Save(savepath); } } /// <summary> /// 上傳文件 /// </summary> /// <param name="file">通過form表達提交的文件</param> /// <param name="virpath">文件要保存的虛擬路徑</param> public static void uploadFile(HttpPostedFile file, string virpath) { if (file.ContentLength > 1024 * 1024 * 6) { throw new Exception("文件不能大於6M"); } string imgtype = Path.GetExtension(file.FileName); //imgtype對上傳的文件進行限制 if (imgtype != ".zip" && imgtype != ".mp3") { throw new Exception("只允許上傳zip、rar....文件"); } string dirFullPath= HttpContext.Current.Server.MapPath(virpath); if (!Directory.Exists(dirFullPath))//如果文件夾不存在，則先創建文件夾 { Directory.CreateDirectory(dirFullPath); } file.SaveAs(dirFullPath + file.FileName); }
二.Ajax文件異步上傳：
注明：既然有了表單上傳為什么又要ajax上傳呢？因為表單上傳過程中，整個頁面就刷新了！ajax異步上傳就可以達到只刷新局部位置，下面就簡單看看ajax上傳吧！
html客戶端部分：
<head> <script src="jquery-2.1.4.js"></script> <script> $(function () { $("#upload").click(function () { $("#imgWait").show(); var formData = new FormData(); formData.append("myfile", document.getElementById("file1").files[0]); $.ajax({ url: "upload.ashx", type: "POST", data: formData, /** *必須false才會自動加上正確的Content-Type */ contentType: false, /** * 必須false才會避開jQuery對 formdata 的默認處理 * XMLHttpRequest會對 formdata 進行正確的處理 */ processData: false, success: function (data) { if (data.status == "true") { alert("上傳成功！"); } if (data.status == "error") { alert(data.msg); } $("#imgWait").hide(); }, error: function () { alert("上傳失敗！"); $("#imgWait").hide(); } }); }); }); </script> </head> <body> 選擇文件:<input type="file" id="file1" /><br /> <input type="button" id="upload" value="上傳" /> <img src="wait.gif" style="display:none" id="imgWait" /> </body>
一般處理程序服務器端：
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; if (context.Request.Files.Count > 0) { HttpPostedFile file1 = context.Request.Files["myfile"]; helper.uploadFile(file1, "~/upload/"); //這里引用的是上面封裝的方法 WriteJson(context.Response, "true", ""); } else { WriteJson(context.Response, "error", "請選擇要上傳的文件"); } }
json代碼封裝：
public static void WriteJson(HttpResponse response, string status1, string msg1, object data1 = null) { response.ContentType = "application/json"; var obj = new { status = status1, msg = msg1, data = data1 }; string json = new JavaScriptSerializer().Serialize(obj); response.Write(json); }
參考：文件的上傳（表單上傳和ajax文件異步上傳） - 風雪幻林 - 博客園
https://www.cnblogs.com/fengxuehuanlin/p/5311648.html
https://www.cnblogs.com/fengxuehuanlin/p/5311648.html
三、ajax實現文件上傳
沒有使用插件
一、單文件上傳
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
文件:<input id="file" type="file" name="file"/>
</form>
<button id="upload">上傳文件</button>
</body>
<script type="text/javascript">
$(function () {
$("#upload").click(function () {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "http://192.168.1.101:8080/springbootdemo/file/upload",
data: formData,
cache: false,
processData: false,
contentType: false,
}).success(function (data) {
alert(data);
}).error(function () {
alert("上傳失敗");
});
});
});
</script>
</html>二、多文件上傳
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
文件:<input type="file" name="file" multiple="multiple"/><br>
</form>
<button id="upload">上傳文件</button>
</body>
<script type="text/javascript">
$(function () {
$("#upload").click(function () {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles",
data: formData,
cache: false,
processData: false,
contentType: false,
}).success(function (data) {
alert(data);
}).error(function () {
alert("上傳失敗");
});
});
});
</script>
</html>這個是多選上傳，關鍵是multiple="multiple"這個屬性，另外使用的接口也是多文件上傳的接口。
當然也可以使用單文件上傳的模式，多次選擇就可以了，只不過接口也是iyaoshiyong多文件上傳的接口。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
文件:<input type="file" name="file"/><br>
文件:<input type="file" name="file"/><br>
文件:<input type="file" name="file"/><br>
</form>
<button id="upload">上傳文件</button>
</body>
<script type="text/javascript">
$(function () {
$("#upload").click(function () {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles",
data: formData,
cache: false,
processData: false,
contentType: false,
}).success(function (data) {
alert(data);
}).error(function () {
alert("上傳失敗");
});
});
});
</script>
</html>測試都通過了！！！
參考：ajax實現文件上傳 - CSDN博客
https://blog.csdn.net/xxkalychen/article/details/77844542
四、通過Ajax方式上傳文件(input file)，使用FormData進行Ajax請求
<div >
<input type="file" name="FileUpload" id="FileUpload">
<a class="layui-btn layui-btn-mini" id="btn_uploadimg">上傳圖片</a>
</div>
<script type="text/jscript">
$(function () {
$("#btn_uploadimg").click(function () {
var fileObj = document.getElementById("FileUpload").files[0]; // js 獲取文件對象
if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
alert("請選擇圖片");
return;
}
var formFile = new FormData();
formFile.append("action", "UploadVMKImagePath");
formFile.append("file", fileObj); //加入文件對象
//第一種 XMLHttpRequest 對象
//var xhr = new XMLHttpRequest();
//xhr.open("post", "/Admin/Ajax/VMKHandler.ashx", true);
//xhr.onload = function () {
// alert("上傳完成!");
//};
//xhr.send(formFile);
//第二種 ajax 提交
var data = formFile;
$.ajax({
url: "/Admin/Ajax/VMKHandler.ashx",
data: data,
type: "Post",
dataType: "json",
cache: false,//上傳文件無需緩存
processData: false,//用於對data參數進行序列化處理 這里必須false
contentType: false, //必須
success: function (result) {
alert("上傳完成!");
},
})
})
})
</script>
補充 IE8 不支持.files 寫法
參考：通過Ajax方式上傳文件(input file)，使用FormData進行Ajax請求 - 初吻給了糖 - 博客園
https://www.cnblogs.com/LoveTX/p/7081515.html
https://www.cnblogs.com/LoveTX/p/7081515.html
五、jquery ajax上傳文件（php）
例子：在頁面上傳一個csv文件，web服務器端用php解析上傳的csv文件並入庫
前端頁面代碼：
<form enctype="multipart/form-data"> <p>上傳csv文件<input type="file" id="csv_file" name="csv_file"/></p> <button id="import">導入</button> </form> <script type="application/javascript"> $("#import").click(function () { var files = $('#csv_file').prop('files'); var data = new FormData(); data.append('csv_file', files[0]); $.ajax({ type: 'POST', url: "http://xxxx/import_csv", data: data, cache: false, processData: false, contentType: false, success: function (ret) { alert(ret); } }); }); </script> form的enctype必須是multipart/form-data才可以上傳多個文件，ajax通過FormData來上傳數據，ajax的cache、processData、contentType均要設置為false。
cache設為false是為了兼容ie8，防止ie8之前版本緩存get請求的處理方式。
contentType設置為false原因：https://segmentfault.com/a/1190000007207128。
processData：要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講並非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。
php代碼：
$uploadFile = $_FILES['csv_file']; $fileName = $uploadFile['tmp_name']; $fHandle = fopen($fileName, 'r'); while ($data = fgetcsv($fHandle)) { //入庫處理 } fclose($fHandle); php通過$_FILES讀取上傳的文件，通過tmp_name可以獲取上傳文件路徑，通過fgetcsv函數讀取csv文件數據
參考：jquery ajax上傳文件 - 簡書
https://www.jianshu.com/p/380661f02997