美观的单张上传控件一个页面可以实例化多个_html/css_WEB-ITnose

首先需要引用 js 和css

1  2       3     4

Img_List.js 如下：

 1 ///   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 = "    "25     $("#"+listId).html(html);26 }27 28 //添加成功29 function imgaddhtml(data, code,listId,fileId,hfId) {30     var list = data.split(',');31     var html = " ";32     html += "    ";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   2                          图片1：  3                           4                               5                               6                              建议尺寸(243*150)  7                           8                       9 10  11                          图片2： 12                          13                              14                           15                              16                               建议尺寸(243*150) 17                          18

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

 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   ///   2         /// 生成一个上传插件信息 3         ///   4         ///  上传控件id  5         ///  隐藏域id用来保存上传的图片路径  6         ///  初始化显示的图片地址  7         ///  上传成功之后用来显示上传图片的标签id  8         ///    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 = "

      
查看更多关于美观的单张上传控件一个页面可以实例化多个_html/css_WEB-ITnose的详细内容...
        
          声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did107188

更新时间：2022-11-17 阅读：32次