“上传图片到服务器”之WebForm

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