前几天朋友说用js上传图片过去遇到点问题，于是自己也想写一个demo这里就把自己挖的坑填了。
话不多说上代码
前台就一个file控件加按钮
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="scripts/jquery-1.9.1.min.js"></script> </head> <body> <input type="file" name="file" id="testFile" nultiple="multiple" /> <input type="button" id="btnSend" value="上传" onclick="UploadFile()" /> <script> function UploadFile() { var formData = new FormData(); jQuery.support.cors = true; var file = $("#testFile")[0].files[0]; formData.append("file", file); $.ajax({ type: "post", url: "./api/file/FileByAsyncTask", data: formData, async: false, /** *必须false才会自动加上正确的Content-Type */ contentType: false, /** * 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */ processData: false, success: function (data) { console.log(data); }, error: function (data) { console.log(data.statusText); } }); } </script> </body> </html>
这里需要注意的就是在发送文件的时候需要使用FormData进行传递
后台代码（用了三种方式处理）
public class FileController : ApiController { TimeSpan tspan = DateTime.Now - new DateTime(1970, 1, 1); /// <summary> /// 图片上传接口 /// </summary> /// <returns></returns> [HttpPost] public HttpResponseMessage FileUpload() { if (!Request.Content.IsMimeMultipartContent("form-data")) throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); HttpResponseMessage response = new HttpResponseMessage(); try { HttpPostedFile file = HttpContext.Current.Request.Files["file"];//获取http传输的文件 string domainPath = HttpRuntime.AppDomainAppPath.ToString();//物理路径 二选一 string serverPath = System.Web.Hosting.HostingEnvironment.MapPath("~/images/img/");//物理路径 string ext = Path.GetExtension(file.FileName);//获取扩展名 string newName = tspan.TotalMilliseconds + ext;//时间戳+扩展名形成新文件名 //方式一 直接保存上传文件 //FileByHttpPostedFile(file,serverPath,tspan.TotalMilliseconds+ext); //方式二 图片流处理 //ImageByStream(file, serverPath, newName); //方式三 先创建文件在移动到指定目录 response.Headers.Add("Access-Control-Allow-Origin", "*"); response.Headers.Add("Access-Control-Alow-Method", "post"); response.Headers.Add("Access-Control-Allow-Headers", "Content-Type"); response.Headers.Add("Access-Control-Max", "3600"); return response; } catch (Exception e) { throw e; } } /// <summary> /// 方法一 通过HttpPostedFile保存 /// </summary> /// <param name="file">Http接收到的文件</param> /// <param name="savePath">保存地址</param> /// <param name="filename">文件名</param> public void FileByHttpPostedFile(HttpPostedFile file, string serverPath, string fileName) { file.SaveAs(serverPath + fileName); } public void ImageByStream(HttpPostedFile file, string serverPath, string fileName) { using (Image img = Bitmap.FromStream(file.InputStream)) { img.Save(serverPath + fileName); } } /// <summary> /// 异步上传 /// </summary> /// <param name="postFile"></param> /// <returns></returns> [HttpPost] public async Task<bool> FileByAsyncTask() { if (!(HttpContext.Current.Request.Files.Count > 0))//判断是否文件 return false; HttpPostedFile postFile = HttpContext.Current.Request.Files["file"];//获取文件 string serverPath = System.Web.Hosting.HostingEnvironment.MapPath("~/images/img/");//获取服务器地址 var provider = new MultipartFormDataStreamProvider(serverPath);//创建MIME 多部分正文新实例 IEnumerable<HttpContent> parts = null; Task.Factory.StartNew(() => { parts = Request.Content.ReadAsMultipartAsync(provider).Result.Contents;//异步获取多部分正文内容 },CancellationToken.None, TaskCreationOptions.LongRunning, TaskScheduler.Default).Wait(); foreach (var file in provider.FileData)//文件保存 { FileInfo _fileInfo = new FileInfo(file.LocalFileName); var fileName = file.Headers.ContentDisposition.FileName.Replace(""","");//从内容读取文件名 string _ext = Path.GetExtension(fileName);//content获取文件名是 "header.jpg" 函数识别字符串 header.jpg所以需要去掉双引号 string _savePath = Path.Combine(serverPath + tspan.TotalMilliseconds + _ext); _fileInfo.MoveTo(_savePath); } return true; } }
比较菜，希望以后继续努力