1、圖片上傳
頁面元素：
//檔案選擇框
<inputtype="file" id="Flie" hidden accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp" />
//圖片
<img src="" id="userPicture" />
//上傳按鈕
<button type=”button” id=”uploadBtn”>上傳</button>
前臺：① 設定預覽圖片
//圖片(img標簽)雙擊擊事件
$(“#userPicture”).dblclick(function(){
//觸發檔案輸入框點擊事件
$(“#File”).click();
)};
//檔案讀取器
var fileReader = new FileReader();
//檔案輸入框改變事件
$(“#File).change(function(){
//獲取檔案輸入框里面的檔案
var files = $(“#File).get(0).files;
//校驗檔案格式
if(/^(?:image\/jpeg|image\/jpg|image\/png|image\/gif|image\/bmp)$/.test(file.type)){
//使用檔案讀取器讀取檔案
fileReader.readAsDataURL(file);
}else{
alert(“您選擇的不是一個有效的圖片檔案”);
}
)};
//檔案讀取器加載事件，檔案讀取完成后觸發
fileReader.onload = function(e){
//設定圖片預覽，即設定img標簽的src屬性
$(“#userPicture”).prop(“src”,e.target.result);
};
② 獲取檔案輸入框中的檔案
//獲取檔案輸入框里面的檔案
var files = $(“#File”).get(0).files;
//判斷用戶是否選擇檔案
if(files.length > 0){
//構建FormData物件
var formData = new FormData();
//將資料添加到FromData物件中
formData.append(“file”,file);
}else{
alert(“請選擇需要上傳的圖片！”);
}
③ 發送請求，上傳圖片，設定回呼
$(“#uploadBtn”).click(function(){
$.ajax({
method:”POST”,
url:”/Main/UploadFile”,
data:formData,
contentType:false,
processData:false,
success:function(){
//根據實際情況設定回呼......
}
)};
)};
后臺：
public ActionResult UploadFile(HttpPostedFileBase file){
//判斷用戶是否上傳圖片
if(file!=null && file.contentLength>0){
//判斷存放圖片的目錄是否存在，目錄路徑根據實際情況決定，以下為實體
if(!System.IO.Directory.Exists(Server.MapPath(“~/Document/picture”))){
//創建目錄
System.IO.Directory.CreateDirectory(Server.MapPath(“~/Document/picture”));
}
//獲取檔案擴展名
string extension = System.IO.Path.GetExtension(file.fileName);
//拼接檔案名，根據實際情況決定，以下為實體
string fileName = DateTime.Now.toString(“yyyyMMddHHmmss”) + extension;
//拼接檔案保存路徑
string filePath = Server.MapPath(“~/Document/picture/”) + fileName;
//保存檔案到磁盤
file.SaveAS(filePath);
//將檔案名保存到資料庫
根據實際情況將檔案名保存到對應的資料庫的表中
}else{
return json(“請選擇需要上傳的圖片！”,JsonRequestBehavior.AllowGet);
}
}
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/13736.html
標籤：非技術區