“上传图片到服务器”之静态页面与一般处理程序

注意：服务器端不准用   \\   必须用   /，如果用\\个会出现很多不必要的麻烦，例如用\\在给用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("上传成功");
}