1、下載jQuery.Form 包
官網下載：http://jquery.malsup.com/form/#download
2、模擬代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>上傳圖片測試</title> <script src="js/jquery-1.8.2.js"></script> <script src="js/jquery.form.js"></script> <script type="text/javascript"> function UpdateUserInfo() { var Id = $("input[name='Id']").val(); var NickName = $("input[name='NickName']").val(); var RealName = $("input[name='RealName']").val(); $("#formDemo").ajaxSubmit({ url: '/Test/Submit?Id='+Id+'&RealName='+RealName+'&NickName='+NickName, /*設置post提交到的頁面*/ type: "post", /*設置表單以post方法提交*/ headers: { AuthCode: "123456789" }, dataType: "json", /*設置返回值類型為文本*/ success: function (data) { //alert(data); var txt = "<p>Id:"+data.Id+"</p><p>RealName:"+data.RealName+"</p><p>NickName:"+data.NickName+"</p><p><img src='"+data.HeadUrl+"' /></p>"; $("#txt").empty().append($(txt)); }, error: function (error) { alert(error); console.info(error); } }); } function submitForm() { UpdateUserInfo(); } </script> </head> <body> <h1>上傳圖片測試</h1> <form id="formDemo" method="post" enctype="multipart/form-data"> <input type="hidden" name="Id" value="69A26DD9-4A83-47DC-B0A1-172224037C95" /> <br /><br /> RealName: <input type="text" name="RealName" value="RealName" /><br /><br /> NickName: <input type="text" name="NickName" value="NickName" /><br /><br /> 頭像：<input type="file" name="HeadUrl" /> <br /><br /> <input type="button" value="測試" onclick="submitForm()" /> </form> <div id="txt"> </div> </body> </html>
3、action 代碼：
/// <summary> /// 上傳文件 修改上傳文件名稱 也不包含后綴名 /// </summary> /// <returns></returns> [HttpPost, Route("Submit")] public async Task<JsonResult<UserModel>> Submit(string Id,string RealName,string NickName) { try { string headUrl = string.Empty; //web api 獲取項目根目錄下指定的文件下 var root = System.Web.Hosting.HostingEnvironment.MapPath("/Resource/Images"); //對上傳文件重新命名 根據需求對應修改文件名稱 不包含后綴名 只是前綴名 var provider = new RenamingMultipartFormDataStreamProvider(root); //文件已經上傳 但是文件沒有后綴名 需要給文件添加后綴名 await Request.Content.ReadAsMultipartAsync(provider); foreach (var file in provider.FileData) { //這里獲取含有雙引號'" ' string filename = file.Headers.ContentDisposition.FileName.Trim('"'); //獲取對應文件后綴名 string fileExt = filename.Substring(filename.LastIndexOf('.')); FileInfo fileinfo = new FileInfo(file.LocalFileName); //fileinfo.Name 上傳后的文件路徑 此處不含后綴名 //修改文件名 添加后綴名 string newFilename = fileinfo.Name + fileExt; //最后保存文件路徑 string saveUrl = Path.Combine(root, newFilename); fileinfo.MoveTo(saveUrl); headUrl = "/Resource/Images/" + newFilename; } UserModel model = new UserModel() { Id = Id, NickName = NickName, RealName = RealName, HeadUrl = headUrl }; return Json<UserModel>(model); } catch (Exception ex) { throw ex; } }