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

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