圖片上傳，圖片一般都是通過保存到磁盤上，然后把檔案名稱（路徑）保存到資料庫，直接保存會導致資料庫記憶體龐大，造成運行緩慢、卡頓
1、添加一個頭像ID，設定圖片的樣式，長寬高，
<img src="" id="userPicture" ondblclick="showImageSelectDialog()" style="max-width: 240px; max-height: 240px;min-width:100px;min-height:100px;border:solid 1px #b7b2b2"/>/
2、隱藏檔案選擇框，用于彈出用戶頭像選擇，圖片一般都是JPEG、JPG等格式，所以用accept進行篩選圖片，，定義一個ID和一個改變事件
<input type="file" hidden id="userPictureFile" accept="image/jpeg,image/png,image/jpg,image/gif,image/bmp" onchange="loadImgToImg()"/>
3、給圖片一個點擊事件：雙擊圖片，觸發檔案輸入框的點擊事件,從而打開檔案選擇
function showImageSelectDialog() {$("#userPictureFile").click();}
Filereader，檔案讀取器，這里用來讀取圖片檔案，用正則運算式過濾image/jpeg,image/png,image/jpg,image/gif,image/bmp檔案格式
var imageReader = new FileReader();
regexImageFilter
=/^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;
4、給檔案讀取器添加一個onload事件，在讀取檔案完成后觸發，
imageReader.onload =function(evt){$("#userPicture").attr("src",evt.target.result);}
1、 給檔案輸入框添加改變事件
function loadImgToImg() {
1）.獲取檔案輸入框里面的檔案,一定要轉為JavaScript檔案,使用.value是拿不到檔案的
var file = $("#userPictureFile").get(0).files[0];
2）.判斷讀取的檔案是否是需要的檔案型別，如果是，用readAsDataURL來讀取檔案readAsDataURL是用來讀取檔案，并把檔案轉為URL(Base64編碼)，方便存盤在資料庫，不會占用過多的記憶體，如果不是，彈出提醒框
if (regexImageFilter.test(file.type)){imageReader.readAsDataURL(file);
} else {alert("選擇的不是一個有效的圖片檔案");}
}
2、 發送請求，使用jQuery Ajax發送formData資料，
var form = new FormData();
form.append("userPicture", userPicture);
$.ajax({
method: "post",檔案上傳時只能使用post提交，不能使用get提交
url:'@Url.Content("~/OthersMaintenance/OpenOffNumber/InsertUser")',
data: form,
processData: false, // 告訴jQuery不要去處理發送的資料
contentType: false, // 告訴jQuery不要去設定Content-Type請求頭
success: function (msg) {
if (msg.State) {
//成功
layer.alert(msg.Text, { icon: 1 });
$("#userPicture").attr("src", "");//清空圖片的預覽
$("#frmUser [type='reset']").click();//清空表單
} else {//失敗layer.alert(msg.Text, { icon: 2 }); }
}
});
3、 到控制器用HttpPostedFileBase接收資料
4、 保存用戶頭像，檢查存放用戶頭像目錄是否存在，如果不存在，則創建一個目錄
if (!System.IO.Directory.Exists(Server.MapPath("~/Document/userPicture/")))
{System.IO.Directory.CreateDirectory(Server.MapPath
("~/Document/userPicture/"));}
5、 判斷是否上傳圖片，圖片不能為空，檔案大小要大于0
1）.獲取檔案的擴展名稱
string imgExtension = System.IO.Path.GetExtension(userPicture.FileName);
2）.拼接要保存的檔案名稱
string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + "_" + Guid.NewGuid() + imgExtension;
3）.拼接檔案保存的路徑
string filePath = Server.MapPath("~/Document/userPicture/") + fileName;
4）.保存上傳的檔案到硬碟
userPicture.SaveAs(filePath);
5）.檔案名稱保存到user物件
user.picture = fileName;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/16190.html
標籤：非技術區
上一篇：檔案的匯入