注意：服務器端不準用 \\ 必須用 /，如果用\\個會出現很多不必要的麻煩，例如用\\在給用jquery給div設置背景圖片時就會出錯，大家甚用。
請求第一次過來的執行執行PageLoad事件，由於是第一次加載所以ISPostBack爲false,直接正常顯示頁面
執行前端頁面，當頁面加載完畢給btnUpload這個submit按鈕添加事件
當點擊btnUpload時首先在前端驗證上傳的文件是不是一個圖片文件,如果不是一個圖片文件都不用post到服務器去--return false阻止了提交，當是一個圖片文件提交表單--return true，則會提交表單，這是一次post請求，重新走頁面請求流程，走到PageLoad，IsPostBack爲true，接收文件並執行各種驗證操作，準備文件名稱與保存路徑並進行保存操作。
一、準備Web項目
新建Tools文件夾、JS文件夾、Pages文件夾、Upload文件夾
Tools文件夾------------------------------用來存放工具類
JS文件夾----------------------------------用來存放JS文件
Pages文件夾----------------------------用來存放Web頁面(靜態/動態)
Upload文件夾---------------------------用來存放上傳成功後的圖片文件
二、在Tools文件夾中新建MyTool.cs
public class MyTool
{
#region ISPicture是判斷一個文件是不是圖片
public static bool ISPicture(HttpPostedFile file)
{
bool result = false;
string[] exts = "bmp,jpg,png,tiff,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw".Split(new char[] { ',' });
List<string> extList = new List<string>();
extList.AddRange(exts);
string ext = Path.GetExtension(file.FileName).Substring(1).ToLower();
if (extList.Contains(ext))
{
result = true;
}
return result;
}
#endregion
#region GetMD5拿一個流的MD5值
public static string GetMD5(Stream stream)
{
string result = string.Empty;
MD5CryptoServiceProvider md5 = new MD5CryptoServiceProvider();
byte[] bytes = md5.ComputeHash(stream);
StringBuilder sb = new StringBuilder();
for (int i = 0; i < bytes.Length; i++)
{
sb.Append(bytes[i].ToString("X2"));
}
result = sb.ToString();
return result;
}
#endregion
#region CreateDirectory先去判斷一個文件夾存不存在，如果不存在的話新建它
public static void CreateDirectory(string path)
{
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
}
#endregion
}三、在JS文件夾中新建MyTool.js
//判斷一個文件是不是一個圖片
function IsPicture(filename) {
var result = false;
//如果filename可用，並且不爲空字符串
if (filename != null && typeof (filename) != undefined && filename != '') {
//當前文件擴展名
var ext = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();
//圖片的各種擴展名數組
var files = 'bmp,jpg,png,tiff,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw'.split(',');
//如果此擴展名屬於圖片擴展名則修改標記爲true
for (var i = 0; i < files.length; i++) {
if (files[i] == ext) {
result = true;
break;
}
}
}
return result;
} 四、在Pages文件新中新建WebForm--------UploadFile
1、前端
Html代碼爲
<form id="form1" runat="server" enctype="multipart/form-data">
請選擇要上傳的文件:<input type="file" name="pfile" id="pfile" />
<input type="submit" name="btnUpload" id="btnUpload" value="上傳" /><span id="lblMsg"><%=lblMsg %></span>
</form>JS代碼爲
<script src="../JS/MyTool.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
uploadFile();
}
//上傳文件
function uploadFile() {
document.getElementById('btnUpload').onclick = function () {
var filename = document.getElementById('pfile').value;
if (!IsPicture(filename)) {
document.getElementById('lblMsg').innerHTML = '請上傳圖片文件';
return false;
}
return true;
}
}
</script>2、後臺
protected string lblMsg = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
//如果是上傳操作
if (Request.Form["btnUpload"] != null)
{
UploadFileMethod();
}
}
}
#region 執行上傳文件操作
protected void UploadFileMethod()
{
HttpPostedFile pfile = Request.Files["pfile"];
if (!MyTool.ISPicture(pfile))
{
lblMsg = "請上傳圖片文件";
return;
}
//新文件名稱
string newfilename = MyTool.GetMD5(pfile.InputStream)+Path.GetExtension(pfile.FileName);
//保存路徑
string newpath = Request.MapPath("/Upload/") + DateTime.Now.ToString("yyyyMMdd");
MyTool.CreateDirectory(newpath);
//拼
string path = Path.Combine(newpath, newfilename);
//執行上傳並提示
pfile.SaveAs(path);
lblMsg = "上傳成功";
}
#endregion
