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");//提示执行成功 }
上传代码的封装：
////// 上传图片 /// /// 通过form表达提交的文件 /// 文件要保存的虚拟路径 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); } } /// /// 上传文件 /// /// 通过form表达提交的文件 /// 文件要保存的虚拟路径 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实现文件上传
没有使用插件
一、单文件上传
二、多文件上传
这个是多选上传，关键是multiple="multiple"这个属性，另外使用的接口也是多文件上传的接口。
当然也可以使用单文件上传的模式，多次选择就可以了，只不过接口也是iyaoshiyong多文件上传的接口。
测试都通过了！！！
参考：ajax实现文件上传 - CSDN博客
https://blog.csdn.net/xxkalychen/article/details/77844542
四、通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求
补充 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