前幾天朋友說用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; } }
比較菜，希望以后繼續努力