“上傳圖片到服務器”之靜態頁面與一般處理程序

注意：服務器端不準用   \\   必須用   /，如果用\\個會出現很多不必要的麻煩，例如用\\在給用jquery給div設置背景圖片時就會出錯，大家甚用。

上傳文件到服務器，首先在前端判斷上傳的這個文件是否符合某種規則，如果不符合就不會提交到服務器，如果符合就會提交到服務器，在服務器還有一層判斷，這樣更加安全。

1、在網站項目中新建Upload文件夾、Handlers文件夾、Tools文夾、Pages文件夾、Js文件夾

      Upload文件夾--------------------------------中用於存放上傳的文件；
      Handlers文件夾-----------------------------中用來存放一般處理程序；
      Tools文件夾----------------------------------中用來存放服務器端的工具類
      Pages文件夾---------------------------------中用來存放展示的頁面
      JS文件夾---------------------------------------中用來存放一些js文件

2、在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;
}

3、在Pages文件夾中新建ShowUpload.htm

Html代碼主要是展示

<form action="/Handlers/UploadFile.ashx" method="post" enctype="multipart/form-data">
       請選擇文件:<input type="file" name="pfile" id="pfile" /><input type="submit" id="btnsubmit"value="上傳" /><span id="lblMsg"></span>
</form>

前端需要判斷上傳的文件是不是圖片

<script src="/JS/MyTool.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function () {
       gosubmit();
    }
    function gosubmit() {
       document.getElementById('btnsubmit').onclick = function () {
           var filename = document.getElementById('pfile').value;
           if (!IsPicture(filename)) {
               document.getElementById('lblMsg').innerHTML='請上傳圖片';
               return false;
           }
           return true;
       }
     }
</script>

4、在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
}

5、在Handlers文件夾中新建UploadFile.ashx

public void ProcessRequest(HttpContext context)
{
      context.Response.ContentType = "text/plain";
      HttpPostedFile pfile = context.Request.Files["pfile"];
      //判斷是不是圖片
      if (!MyTool.ISPicture(pfile))
      {
         return;
      }

      //準備新的文件名稱,準備新的保存路徑
      string newfilename = MyTool.GetMD5(pfile.InputStream) + Path.GetExtension(pfile.FileName);
      string newpath = context.Request.MapPath("/Upload/") + DateTime.Now.ToString("yyyyMMdd");
      MyTool.CreateDirectory(newpath);
      string path = Path.Combine(newpath, newfilename);

      //執行保存操作
      pfile.SaveAs(path);
      context.Response.Write("上傳成功");
}