美观的单张上传控件 一个页面可以实例化多个_html/css_WEB-ITnose
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-06-24 11:49:03
首先需要引用 js 和css
1 | 1 <!--上传控件-->2 <script src= "query.form.min.js" ></script>3 <link href= "Img_List.css" rel= "stylesheet" />4 <script src= "Img_List.js" ></script>
|
登入後複製
1 | 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 | 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= "max-width:90%" >建议尺寸(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 | 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 }
|
登入後複製
生成上传控件方法
上传文件的方法ashx:
1 | 1 using System; 2 using System.Collections; 3 using System.Collections.Generic; 4 using System.IO; 5 using System.Linq; 6 using System.Text.RegularExpressions; 7 using System.Web; 8 using DotNet.Kernel.Common; 9 using DotNet.Utilities; 10 using LitJson; 11 12 namespace BPMS.WEB.Admin.ashx 13 { 14
|
登入後複製
1 | 1 using System; 2 using System.Collections; 3 using System.Collections.Generic; 4 using System.IO; 5 using System.Linq; 6 using System.Web; 7 using DotNet.Kernel.Common; 8 9 namespace BPMS.WEB 10 { 11 public class UpLoad 12 { 13 public UpLoad() 14 { 15 16 } 17
|
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
-
2025-02-26 03:58:14
-
2025-02-26 03:38:10
-
2025-02-26 03:17:10
-
2025-02-26 02:49:09
-
2025-02-26 01:08:13
-
2025-02-26 00:46:10
-
2025-02-25 23:42:08
-
2025-02-25 22:50:13
-
2025-02-25 21:54:11
-
2025-02-25 20:45:11
最新問題
-
2025-03-21 18:33:45
-
2025-03-21 12:41:25
-
2025-03-21 12:40:34
-
2025-03-21 12:39:27
-
2025-03-21 12:37:30