先大概理清一下思路:
1.共享目錄的配置,這里包括了新建一個共享目錄,而且必須設置一下目錄的權限。不然無法訪問操作此目錄。
2.iis站點下創建虛擬目錄指向共享目錄。
3.前端處理上傳圖片。
4.后台操作圖片保存到站點的虛擬目錄,並返回一個當前圖片路徑給前端展示。
實現:
1.創建共享文件夾並設置相關權限
權限這里,為了方便就直接給了every one
2.iis站點下創建虛擬目錄指向共享目錄。
別名:是后台代碼上傳圖片是保存的路徑
物理路徑就是你創建的共享目錄的路徑,我是用了遠程服務器上的共享目錄,所以當我創建時會提示輸入賬號跟密碼。
到這里前期准備工作就完成了,接下來就是敲代碼了。
3.前端處理上傳圖片
<input type="file" name="file" multiple="multiple" id="imageSave" onchange="Javascript:validate_img(this);">
上傳圖片的input,這里我給了一個事件validate_img(this);用於檢驗圖片格式,大小,然后上傳
function validate_img(a) { var filetypes = [".jpg", ".png", ".jpeg", ".gif", ".JPG", ".PNG", ".JPEG", ".GIF"];//圖片格式 var filepath = a.files[0].name;//圖片名稱 if (filepath) { var isnext = false; var fileend = filepath.substring(filepath.lastIndexOf(".")); if (filetypes && filetypes.length > 0) { for (var j = 0; j < filetypes.length; j++) { if (filetypes[j] == fileend) { isnext = true; break; } } } if (!isnext) { alert("不接受此文件類型!") a.value = ""; return false; } else if (a.files[0].size > 1024 * 1024 * 2) { alert("單張圖片不能大於2m") a.value = ""; return false; } else { //上傳 var formdata = new FormData(); var img_file3 = document.getElementById("imageSave"); var fileobj3 = img_file3.files[0];//獲取圖片 formdata.append('image', fileobj3); $.ajax({ url: "/SaveImage?module=uploadimg", type: 'POST', data: formdata, cache: false, async: false, processData: false, // 告訴jQuery不要去處理發送的數據 contentType: false, // 告訴jQuery不要去設置Content-Type請求頭 success: function (result) { if (result.IsSuccess == true) { //上傳成功后,獲取圖片的路徑,用於前端展示 } else { alert("上傳圖片異常:" + result.Date); } } }); } } else { return false; } }
前端上傳部分就完成了,下面是后台處理過程:
4.后台操作圖片保存到站點的虛擬目錄,並返回一個當前圖片路徑給前端展示
//獲取上傳的文件
HttpPostedFileBase PostFile = Request.Files["image"];
然后判斷圖片是否存在
if (strExts.Contains(strExt)) { //獲取文件名 string strfileName = PostFile.FileName.Trim(); strfileName = repalceStr(strfileName); //獲取擴展名 string strExt = Path.GetExtension(strfileName); //上傳目錄 string mypath = System.Web.HttpContext.Current.Server.MapPath("~/upload_img/"); DirectoryInfo theFolder = new DirectoryInfo(mypath); //定義新的文件名,格式:“201909110323146909_文件名.zip” string strNewName = DateTime.Now.ToString("yyyyMMddhhmmssffff") + "_" + strfileName; string path = Path.Combine(theFolder.FullName, strNewName); //保存文件到文件服務器 PostFile.SaveAs(path); //將文件的保存的相對路徑輸出到客戶端 var imgurl = "~/upload_img/" + strNewName; result.Data = imgurl; }else{ }
到這里,就基本完成了。查看共享目錄是否有圖片!!
然后就是前端獲取返回的圖片路徑進行展示就好了。