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

首先需要引用 js 和CSS

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

Img_List.js 如下：

 1 /// <reference path="../../script/jquery-1.8.0.min.js" /> 2 //显示 3 function imgshow(obj) { 4     //$(obj).find("a").show(); 5 } 6  7 //隐藏 8 function imghide(obj) { 9     //$(obj).find("a").hide();10 }11 12 //上传13 function upload() { 14     $("#FileLoad").click();15 }16 17 //删除18 function imgdel(listId, FileId, hfId) {19     20     $.post("/CommonModule/ashx/public.ashx?action=DelMessageImg&Files=" + $("#" + hfId).val(), function (result) {21         if (result != "ok")22             $.messager.alert("消息提示", "删除失败!");23      });24     var html = "<li><img src=\"/Themes/Images/jia.jpg\" style=\"height: 80px; width: 80px;\" /><input type=\"file\" id=\""+FileId+"\" class=\"input\" onchange=\"ImgUpload('"+FileId+"','"+hfId+"','"+listId+"');\" name=\""+FileId+"\" /></li>"25     $("#"+listId).html(html);26 }27 28 //添加成功29 function imgadDHTML(data, code,listId,fileId,hfId) {30     var list = data.split(',');31     var html = "<li onmouSEOver=\"imgshow(this)\" onmouseout=\"imghide(this);\">";32     html += "<a style=\"height:80px;width:80px;\" href=\"" + list[0] + "\" target=\"_blank\"><img src=\"" + list[0] + "\" imgs=\"" + list[0] + "\" code=\"" + code + "\" /></a><span  onclick=\"imgdel('"+listId+"','"+fileId+"','"+hfId+"')\"></span></li>";33     $("#" + listId).html(html);34 }35 36 //图片文件上传37 //uppath 上传空间id 38 //上传成功存放的图片路径的隐藏域id39 //listId 显示图片的区域id40 function ImgUpload(uppath, hndimg,listId) {41     var sendUrl = "/CommonModule/ashx/Upload_Ajax.ashx?action=SingleFile&IsThumbnail=1&UpFilePath=" + uppath;42     //开始提交43     $("#form1").ajaxSubmit({44         beforeSubmit: function (formData, jqForm, options) {45             //alert(1);46         },47         success: function (data, textStatus) {48             var list = $("#" + hndimg).val();49             $("#" + hndimg).val(data.msgbox);50             imgaddhtml(data.msgbox, 0,listId,uppath,hndimg);51         },52         error: function (data, status, e) {53             alert("上传失败！");54         },55         url: sendUrl,56         type: "post",57         dataType: "json",58         timeout: 60000059     });60 };

Img_List.css 如下：

1 .img_list{ margin:0px; padding:0px;  overflow:hidden;}2 .img_list ul,.img_list ul li{ margin:0px; padding:0px;} 3 .img_list ul li{ float:left; list-style:none; position:relative; margin:5px 0px 0px 5px;}4 .img_list ul li span5 { position:absolute;top:3px; right:3px; width: 16px; height: 16px; opacity: 0.6;filter: alpha(opacity=60); margin: 0 0 0 2px;6 vertical-align: top; background: url('/Themes/Images/panel_tools.png') no-repeat -16px 0px;}7 .img_list ul li img{ width:80px; height:80px; cursor:pointer; position:relative; z-index:0;}8 .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 如下：

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

 1 <tr> 2                         <th>图片1：</th> 3                         <td> 4                             <asp:Literal ID="ltrimg_list" runat="server"></asp:Literal> 5                             <input type="hidden" runat="server" id="ImgPath" name="ImgPath" /> 6                             <span style="color:blue;">建议尺寸(243*150)</span> 7                         </td> 8                     </tr> 9 10 <tr>11                         <th>图片2：</th>12                         <td>13                             <asp:Literal ID="Literal1" runat="server"></asp:Literal>14                           15                             <input type="hidden" runat="server" id="hkImgPath" name="hkImgPath" />16                              <span style="color:blue;">建议尺寸(243*150)</span>17                         </td>18                     </tr>

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

 1  PRotected void Page_Load(object sender, EventArgs e) 2         { 3            4             if (!IsPostBack) 5             { 6                ltrimg_list.Text = UpLoad.showUploadFile("File1", "ImgPath", mfmodel.ImgPath, "img_list1"); 7                 Literal1.Text = UpLoad.showUploadFile("File2", "hkImgPath", mfmodel.hkImgPath, "img_list2"); 8                     9             }10         }

生成上传控件方法

 1   /// <summary> 2         /// 生成一个上传插件信息 3         /// </summary> 4         /// <param name="fileId">上传控件id</param> 5         /// <param name="hfId">隐藏域id用来保存上传的图片路径</param> 6         /// <param name="imgUrl">初始化显示的图片地址</param> 7         /// <param name="listId">上传成功之后用来显示上传图片的标签id</param> 8         /// <returns></returns> 9         public static string showUploadFile(string fileId, string hfId, string imgUrl, string listId)10         {11             string result = "";12             if (!string.IsNullOrEmpty(imgUrl))13             {14                 result = "<div class=\"img_list\"><ul id=\"" + listId + "\"><li onmouseover=\"imgshow(this)\" onmouseout=\"imghide(this);\"><a style=\"height:80px;width:80px;\" href=\"" + imgUrl + "\" target=\"_blank\"><img src=\"" + imgUrl + "\" imgs=\"" + imgUrl + "\" code=\"0\" /></a><span onclick=\"imgdel('" + listId + "','" + fileId + "','" + hfId + "')\"></span></li></ul></div>";15             }16             else17             {18                 result = "<div class=\"img_list\"><ul id=\"" + listId + "\"><li><img src=\"/Themes/Images/jia.jpg\" style=\"heigh