美观的单张上传控件 一个页面可以实例化多个

首先需要引用 js 和css

<!--上传控件-->
    <script src="query.form.min.js"></script>
    <link href="Img_List.css" rel="stylesheet" />
    <script src="Img_List.js"></script>

Img_List.js 如下：

/// <reference path="../../script/jquery-1.8.0.min.js" />
//显示
function imgshow(obj) {
    //$(obj).find("a").show();
}

//隐藏
function imghide(obj) {
    //$(obj).find("a").hide();
}

//上传
function upload() { 
    $("#FileLoad").click();
}

//删除
function imgdel(listId, FileId, hfId) {
    
    $.post("/CommonModule/ashx/public.ashx?action=DelMessageImg&Files=" + $("#" + hfId).val(), function (result) {
        if (result != "ok")
            $.messager.alert("消息提示", "删除失败!");
     });
    var html = "<li><img src="/Themes/Images/jia.jpg" style="height: 80px;  80px;" /><input type="file" id=""+FileId+"" class="input" onchange="ImgUpload('"+FileId+"','"+hfId+"','"+listId+"');" name=""+FileId+"" /></li>"
    $("#"+listId).html(html);
}

//添加成功
function imgaddhtml(data, code,listId,fileId,hfId) {
    var list = data.split(',');
    var html = "<li onmouseover="imgshow(this)" onmouseout="imghide(this);">";
    html += "<a style="height:80px;80px;" href="" + list[0] + "" target="_blank"><img src="" + list[0] + "" imgs="" + list[0] + "" code="" + code + "" /></a><span  onclick="imgdel('"+listId+"','"+fileId+"','"+hfId+"')"></span></li>";
    $("#" + listId).html(html);
}

//图片文件上传
//uppath 上传空间id 
//上传成功存放的图片路径的隐藏域id
//listId 显示图片的区域id
function ImgUpload(uppath, hndimg,listId) {
    var sendUrl = "/CommonModule/ashx/Upload_Ajax.ashx?action=SingleFile&IsThumbnail=1&UpFilePath=" + uppath;
    //开始提交
    $("#form1").ajaxSubmit({
        beforeSubmit: function (formData, jqForm, options) {
            //alert(1);
        },
        success: function (data, textStatus) {
            var list = $("#" + hndimg).val();
            $("#" + hndimg).val(data.msgbox);
            imgaddhtml(data.msgbox, 0,listId,uppath,hndimg);
        },
        error: function (data, status, e) {
            alert("上传失败！");
        },
        url: sendUrl,
        type: "post",
        dataType: "json",
        timeout: 600000
    });
};

Img_List.css 如下：

.img_list{ margin:0px; padding:0px;  overflow:hidden;}
.img_list ul,.img_list ul li{ margin:0px; padding:0px;} 
.img_list ul li{ float:left; list-style:none; position:relative; margin:5px 0px 0px 5px;}
.img_list ul li span
{ position:absolute;top:3px; right:3px; width: 16px; height: 16px; opacity: 0.6;filter: alpha(opacity=60); margin: 0 0 0 2px;
vertical-align: top; background: url('/Themes/Images/panel_tools.png') no-repeat -16px 0px;}
.img_list ul li img{ width:80px; height:80px; cursor:pointer; position:relative; z-index:0;}
.img_list ul li .input{ width:80px; height:80px; cursor:pointer; position:relative; left:-100px;vertical-align: top; margin:0px; padding:0px; opacity:0;filter: alpha(opacity=0); }

panel_tools.png 如下：

jia.jpg 如下：

以上素材引用完成后 再看 前台页面代码：

<tr>
                        <th>图片1：</th>
                        <td>
                            <asp:Literal ID="ltrimg_list" runat="server"></asp:Literal>
                            <input type="hidden" runat="server" id="ImgPath" name="ImgPath" />
                            <span style="color:blue;">建议尺寸(243*150)</span>
                        </td>
                    </tr>

<tr>
                        <th>图片2：</th>
                        <td>
                            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
                          
                            <input type="hidden" runat="server" id="hkImgPath" name="hkImgPath" />
                             <span style="color:blue;">建议尺寸(243*150)</span>
                        </td>
                    </tr>

后台页面代码 （初始化控件） ：

 protected void Page_Load(object sender, EventArgs e)
        {
          
            if (!IsPostBack)
            {
               ltrimg_list.Text = UpLoad.showUploadFile("File1", "ImgPath", mfmodel.ImgPath, "img_list1");
                Literal1.Text = UpLoad.showUploadFile("File2", "hkImgPath", mfmodel.hkImgPath, "img_list2");
                   
            }
        }

生成上传控件方法

  /// <summary>
        /// 生成一个上传插件信息
        /// </summary>
        /// <param name="fileId">上传控件id</param>
        /// <param name="hfId">隐藏域id用来保存上传的图片路径</param>
        /// <param name="imgUrl">初始化显示的图片地址</param>
        /// <param name="listId">上传成功之后用来显示上传图片的标签id</param>
        /// <returns></returns>
        public static string showUploadFile(string fileId, string hfId, string imgUrl, string listId)
        {
            string result = "";
            if (!string.IsNullOrEmpty(imgUrl))
            {
                result = "<div class="img_list"><ul id="" + listId + ""><li onmouseover="imgshow(this)" onmouseout="imghide(this);"><a style="height:80px;80px;" href="" + imgUrl + "" target="_blank"><img src="" + imgUrl + "" imgs="" + imgUrl + "" code="0" /></a><span onclick="imgdel('" + listId + "','" + fileId + "','" + hfId + "')"></span></li></ul></div>";
            }
            else
            {
                result = "<div class="img_list"><ul id="" + listId + ""><li><img src="/Themes/Images/jia.jpg" style="height: 80px;  80px;" /><input type="file" id="" + fileId + ""class="input" onchange="ImgUpload('" + fileId + "','" + hfId + "','" + listId + "')" name="" + fileId + "" /></li></ul></div>";
            }

            return result;
        }

上传文件的方法ashx:

using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using DotNet.Kernel.Common;
using DotNet.Utilities;
using LitJson;

namespace BPMS.WEB.Admin.ashx
{
    /// <summary>
    /// Upload_Ajax 的摘要说明
    /// </summary>
    public class Upload_Ajax : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            //取得处事类型
            string action = context.Request.QueryString["action"];

            switch (action)
            {
                case "SingleFile": //单文件
                    SingleFile(context);
                    break;
                case "MultipleFile": //多文件
                    MultipleFile(context);
                    break;
                case "AttachFile": //附件
                    AttachFile(context);
                    break;
                case "EditorFile": //编辑器文件
                    EditorFile(context);
                    break;

            }
        }



        #region 上传单文件处理===================================
        private void SingleFile(HttpContext context)
        {

            string _refilepath = context.Request.QueryString["ReFilePath"]; //取得返回的对象名称
            string _upfilepath = context.Request.QueryString["UpFilePath"]; //取得上传的对象名称
            string _delfile = context.Request.QueryString[_refilepath];
            HttpPostedFile _upfile = null;
            try
            {
                _upfile = context.Request.Files[_upfilepath];
            }
            catch (Exception e)
            {
                context.Response.Write("{"msg": "0", "msgbox": "上传文件过大！"}");
                context.Response.End();
            }
            bool _iswater = false; //默认不打水印
            bool _isthumbnail = false; //默认不生成缩略图
            bool _isimage = false;

            if (context.Request.QueryString["IsWater"] == "1")
                _iswater = true;
            if (context.Request.QueryString["IsThumbnail"] == "1")
                _isthumbnail = true;
            if (context.Request.QueryString["IsImage"] == "1")
                _isimage = true;

            if (_upfile == null)
            {
                context.Response.Write("{"msg": "0", "msgbox": "请选择要上传文件！"}");
                return;
            }
            UpLoad upFiles = new UpLoad();
            string msg = upFiles.fileSaveAs(_upfile, _isthumbnail, _iswater, _isimage);
            //删除已存在的旧文件
            Utils.DeleteUpFile(_delfile);
            //返回成功信息
            context.Response.Write(msg);

            context.Response.End();
        }
        #endregion

        #region 上传多文件处理===================================
        private void MultipleFile(HttpContext context)
        {
            string _upfilepath = context.Request.QueryString["UpFilePath"]; //取得上传的对象名称
            HttpPostedFile _upfile = context.Request.Files[_upfilepath];
            bool _iswater = false; //默认不打水印
            bool _isthumbnail = false; //默认不生成缩略图

            if (context.Request.QueryString["IsWater"] == "1")
                _iswater = true;
            if (context.Request.QueryString["IsThumbnail"] == "1")
                _isthumbnail = true;

            if (_upfile == null)
            {
                context.Response.Write("{"msg": "0", "msgbox": "请选择要上传文件！"}");
                return;
            }
            UpLoad upFiles = new UpLoad();
            string msg = upFiles.fileSaveAs(_upfile, _isthumbnail, _iswater);
            //返回成功信息
            context.Response.Write(msg);
            context.Response.End();
        }
        #endregion

        #region 上传附件处理=====================================
        private void AttachFile(HttpContext context)
        {
            string _upfilepath = context.Request.QueryString["UpFilePath"]; //取得上传的对象名称
            HttpPostedFile _upfile = context.Request.Files[_upfilepath];
            bool _iswater = false; //默认不打水印
            bool _isthumbnail = false; //默认不生成缩略图

            if (_upfile == null)
            {
                context.Response.Write("{"msg": "0", "msgbox": "请选择要上传文件！"}");
                return;
            }
            UpLoad upFiles = new UpLoad();
            string msg = upFiles.fileSaveAs(_upfile, _isthumbnail, _iswater, false, true);
            //返回成功信息
            context.Response.Write(msg);
            context.Response.End();
        }
        #endregion

        #region 编辑器上传处理===================================
        private void EditorFile(HttpContext context)
        {
            bool _iswater = false; //默认不打水印
            if (context.Request.QueryString["IsWater"] == "1")
                _iswater = true;
            HttpPostedFile imgFile = context.Request.Files["imgFile"];
            if (imgFile == null)
            {
                showError(context, "请选择要上传文件！");
                return;
            }
            UpLoad upFiles = new UpLoad();
            string remsg = upFiles.fileSaveAs(imgFile, false, _iswater);
            //string pattern = @"^{s*msg:s*(.*)s*,s*msgbox:s*""(.*)""s*}$"; //键名前和键值前后都允许出现空白字符
            string pattern = @"^{s*""msg"":s*""(.*)""s*,s*""msgbox"":s*""(.*)""s*}$"; //键名前和键值前后都允许出现空白字符
            Regex r = new Regex(pattern, RegexOptions.IgnoreCase); //正则表达式实例，不区分大小写
            Match m = r.Match(remsg); //搜索匹配项
            string msg = m.Groups[1].Value; //msg的值，正则表达式中第1个圆括号捕获的值
            string msgbox = m.Groups[2].Value; //msgbox的值，正则表达式中第2个圆括号捕获的值 
            if (msg == "0")
            {
                showError(context, msgbox);
                return;
            }
            Hashtable hash = new Hashtable();
            hash["error"] = 0;
            hash["url"] = msgbox;
            context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");

            string result = JsonMapper.ToJson(hash);
            //result = result.Replace("[","");
            //result = result.Replace("]", "");
            context.Response.Write(result);
            
           context.Response.End();

        }
        //显示错误
        private void showError(HttpContext context, string message)
        {
            Hashtable hash = new Hashtable();
            hash["error"] = 1;
            hash["message"] = message;
            context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
            context.Response.Write(JsonMapper.ToJson(hash));
            context.Response.End();
        }
        #endregion



        #region Helper
        public class NameSorter : IComparer
        {
            public int Compare(object x, object y)
            {
                if (x == null && y == null)
                {
                    return 0;
                }
                if (x == null)
                {
                    return -1;
                }
                if (y == null)
                {
                    return 1;
                }
                FileInfo xInfo = new FileInfo(x.ToString());
                FileInfo yInfo = new FileInfo(y.ToString());

                return xInfo.FullName.CompareTo(yInfo.FullName);
            }
        }

        public class SizeSorter : IComparer
        {
            public int Compare(object x, object y)
            {
                if (x == null && y == null)
                {
                    return 0;
                }
                if (x == null)
                {
                    return -1;
                }
                if (y == null)
                {
                    return 1;
                }
                FileInfo xInfo = new FileInfo(x.ToString());
                FileInfo yInfo = new FileInfo(y.ToString());

                return xInfo.Length.CompareTo(yInfo.Length);
            }
        }

        public class TypeSorter : IComparer
        {
            public int Compare(object x, object y)
            {
                if (x == null && y == null)
                {
                    return 0;
                }
                if (x == null)
                {
                    return -1;
                }
                if (y == null)
                {
                    return 1;
                }
                FileInfo xInfo = new FileInfo(x.ToString());
                FileInfo yInfo = new FileInfo(y.ToString());

                return xInfo.Extension.CompareTo(yInfo.Extension);
            }
        }

        #endregion

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using DotNet.Kernel.Common;

namespace BPMS.WEB
{
    public class UpLoad
    {
        public UpLoad()
        {

        }
        /// <summary>
        /// 生成一个上传插件信息
        /// </summary>
        /// <param name="fileId">上传控件id</param>
        /// <param name="hfId">隐藏域id用来保存上传的图片路径</param>
        /// <param name="imgUrl">初始化显示的图片地址</param>
        /// <param name="listId">上传成功之后用来显示上传图片的标签id</param>
        /// <returns></returns>
        public static string showUploadFile(string fileId, string hfId, string imgUrl, string listId)
        {
            string result = "";
            if (!string.IsNullOrEmpty(imgUrl))
            {
                result = "<div class="img_list"><ul id="" + listId + ""><li onmouseover="imgshow(this)" onmouseout="imghide(this);"><a style="height:80px;80px;" href="" + imgUrl + "" target="_blank"><img src="" + imgUrl + "" imgs="" + imgUrl + "" code="0" /></a><span onclick="imgdel('" + listId + "','" + fileId + "','" + hfId + "')"></span></li></ul></div>";
            }
            else
            {
                result = "<div class="img_list"><ul id="" + listId + ""><li><img src="/Themes/Images/jia.jpg" style="height: 80px;  80px;" /><input type="file" id="" + fileId + ""class="input" onchange="ImgUpload('" + fileId + "','" + hfId + "','" + listId + "')" name="" + fileId + "" /></li></ul></div>";
            }

            return result;
        }
        #region
        /// <summary>
        /// 裁剪图片并保存
        /// </summary>
        public bool cropSaveAs(string fileName, string newFileName, int maxWidth, int maxHeight, int cropWidth, int cropHeight, int X, int Y)
        {
            string fileExt = Utils.GetFileExt(fileName); //文件扩展名，不含“.”
            if (!IsImage(fileExt))
            {
                return false;
            }
            string newFileDir = Utils.GetMapPath(newFileName.Substring(0, newFileName.LastIndexOf(@"/") + 1));
            //检查是否有该路径，没有则创建
            if (!Directory.Exists(newFileDir))
            {
                Directory.CreateDirectory(newFileDir);
            }
            try
            {
                string fileFullPath = Utils.GetMapPath(fileName);
                string toFileFullPath = Utils.GetMapPath(newFileName);
                return Thumbnail.MakeThumbnailImage(fileFullPath, toFileFullPath, 180, 180, cropWidth, cropHeight, X, Y);
            }
            catch
            {
                return false;
            }
        }

        /// <summary>
        /// 文件上传方法A
        /// </summary>
        /// <param name="postedFile">文件流</param>
        /// <param name="isThumbnail">是否生成缩略图</param>
        /// <param name="isWater">是否打水印</param>
        /// <returns>服务器文件路径</returns>
        public string fileSaveAs(HttpPostedFile postedFile, bool isThumbnail, bool isWater)
        {
            return fileSaveAs(postedFile, isThumbnail, isWater, false, false);
        }

        /// <summary>
        /// 文件上传方法B
        /// </summary>
        /// <param name="postedFile">文件流</param>
        /// <param name="isThumbnail">是否生成缩略图</param>
        /// <param name="isWater">是否打水印</param>
        /// <param name="isImage">是否必须上传图片</param>
        /// <returns>服务器文件路径</returns>
        public string fileSaveAs(HttpPostedFile postedFile, bool isThumbnail, bool isWater, bool _isImage)
        {
            return fileSaveAs(postedFile, isThumbnail, isWater, _isImage, false);
        }

        /// <summary>
        /// 文件上传方法C
        /// </summary>
        /// <param name="postedFile">文件流</param>
        /// <param name="isThumbnail">是否生成缩略图</param>
        /// <param name="isWater">是否打水印</param>
        /// <param name="isReOriginal">是否返回文件原名称</param>
        /// <returns>服务器文件路径</returns>
        public string fileSaveAs(HttpPostedFile postedFile, bool isThumbnail, bool isWater, bool _isImage, bool _isReOriginal)
        {
            try
            {
                string fileExt = Utils.GetFileExt(postedFile.FileName); //文件扩展名，不含“.”
                string originalFileName = postedFile.FileName.Substring(postedFile.FileName.LastIndexOf(@"") + 1); //取得文件原名
                string fileName = Utils.GetRamCode() + "." + fileExt; //随机文件名
                string dirPath = GetUpLoadPath(); //上传目录相对路径

                //检查文件扩展名是否合法
                if (!CheckFileExt(fileExt))
                {
                    return "{"msg": "0", "msgbox": "不允许上传" + fileExt + "类型的文件！"}";
                }
                //检查是否必须上传图片
                if (_isImage && !IsImage(fileExt))
                {
                    return "{"msg": "0", "msgbox":  "对不起，仅允许上传图片文件！"}";
                }
                //检查文件大小是否合法
                if (!CheckFileSize(fileExt, postedFile.ContentLength))
                {
                    return "{"msg": "0", "msgbox":  "文件超过限制的大小啦！"}";
                }
                //获得要保存的文件路径
                string serverFileName = dirPath + fileName;
                string serverThumbnailFileName = dirPath + "small_" + fileName;
                string returnFileName = serverFileName;
                //物理完整路径                    
                string toFileFullPath = Utils.GetMapPath(dirPath);
                //检查有该路径是否就创建
                if (!Directory.Exists(toFileFullPath))
                {
                    Directory.CreateDirectory(toFileFullPath);
                }
                //保存文件
                postedFile.SaveAs(toFileFullPath + fileName);
                //如果是图片，检查图片尺寸是否超出限制
                if (IsImage(fileExt))
                {
                    Thumbnail.MakeThumbnailImage(toFileFullPath + fileName, toFileFullPath + fileName, 3000, 3000);
                }
                //是否生成缩略图
                if (IsImage(fileExt) && isThumbnail)
                {
                    Thumbnail.MakeThumbnailImage(toFileFullPath + fileName, toFileFullPath + "small_" + fileName, 150, 150, "R");
                   // returnFileName += "," + serverThumbnailFileName; //返回缩略图，以逗号分隔开
                }
                //是否打图片水印
                if (IsWaterMark(fileExt) && isWater)
                {
                    //switch (this.siteConfig.watermarktype)
                    //{
                    //    case 1:
                    //        WaterMark.AddImageSignText(serverFileName, serverFileName,
                    //            this.siteConfig.watermarktext, this.siteConfig.watermarkposition,
                    //            this.siteConfig.watermarkimgquality, this.siteConfig.watermarkfont, this.siteConfig.watermarkfontsize);
                    //        break;
                    //    case 2:
                    //        WaterMark.AddImageSignPic(serverFileName, serverFileName,
                    //            this.siteConfig.watermarkpic, this.siteConfig.watermarkposition,
                    //            this.siteConfig.watermarkimgquality, this.siteConfig.watermarktransparency);
                    //        break;
                    //}
                }
                //如果需要返回原文件名
                if (_isReOriginal)
                {
                    return "{"msg": "1", "msgbox": "" + serverFileName + "", mstitle: "" + originalFileName + ""}";
                }
                return "{"msg": "1", "msgbox": "" + returnFileName + ""}";
            }
            catch
            {
                return "{"msg": "0", "msgbox":  "上传过程中发生意外错误！"}";
            }
        }


        #region 私有方法

        /// <summary>
        /// 返回上传目录相对路径
        /// </summary>
        /// <param name="fileName">上传文件名</param>
        private string GetUpLoadPath()
        {
            //string path = "/Files/upload/"; //站点目录+上传目录
            string path = "/upload/"; //站点目录+上传目录
            path += DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd");
            return path + "/";
        }

        /// <summary>
        /// 是否需要打水印
        /// </summary>
        /// <param name="_fileExt">文件扩展名，不含“.”</param>
        private bool IsWaterMark(string _fileExt)
        {
            //判断是否开启水印
            if (1 == 1)
            {
                //判断是否可以打水印的图片类型
                ArrayList al = new ArrayList();
                al.Add("bmp");
                al.Add("jpeg");
                al.Add("jpg");
                al.Add("png");
                if (al.Contains(_fileExt.ToLower()))
                {
                    return true;
                }
            }
            return false;
        }

        /// <summary>
        /// 是否为图片文件
        /// </summary>
        /// <param name="_fileExt">文件扩展名，不含“.”</param>
        private bool IsImage(string _fileExt)
        {
            ArrayList al = new ArrayList();
            al.Add("bmp");
            al.Add("jpeg");
            al.Add("jpg");
            al.Add("gif");
            al.Add("png");
            if (al.Contains(_fileExt.ToLower()))
            {
                return true;
            }
            return false;
        }

        /// <summary>
        /// 检查是否为合法的上传文件
        /// </summary>
        private bool CheckFileExt(string _fileExt)
        {
            //检查危险文件
            string[] excExt = { "asp", "aspx", "php", "jsp", "htm", "html" };
            for (int i = 0; i < excExt.Length; i++)
            {
                if (excExt[i].ToLower() == _fileExt.ToLower())
                {
                    return false;
                }
            }
            //检查合法文件
            string[] allowExt = { "gif", "jpg", "png", "bmp", "rar", "zip", "doc", "xls", "txt" };
            for (int i = 0; i < allowExt.Length; i++)
            {
                if (allowExt[i].ToLower() == _fileExt.ToLower())
                {
                    return true;
                }
            }
            return false;
        }

        /// <summary>
        /// 检查文件大小是否合法
        /// </summary>
        /// <param name="_fileExt">文件扩展名，不含“.”</param>
        /// <param name="_fileSize">文件大小(KB)</param>
        private bool CheckFileSize(string _fileExt, int _fileSize)
        {
            //判断是否为图片文件
            if (IsImage(_fileExt))
            {
                if (_fileSize > 10000 * 10240)
                {
                    return false;
                }
            }
            else
            {
                if (_fileSize > 10000 * 10240)
                {
                    return false;
                }
            }
            return true;
        }

        #endregion

        #endregion
    }
}