美觀的單張上傳控件 一個頁面可以實例化多個

首先需要引用 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