以文本方式查看主题

-  Foxtable(狐表)  (http://foxtable.net/bbs/index.asp)
--  专家坐堂  (http://foxtable.net/bbs/list.asp?boardid=2)
----  动态添加图片  (http://foxtable.net/bbs/dispbbs.asp?boardid=2&id=178758)
--  作者：lshshlxsh
--  发布时间：2022/7/19 15:46:00
--  动态添加图片
请问老师，一下代码我点击添加后显示新的两张图片，请问老师我要怎么设置添加进来的图片也能放大缩小？

<!DOCTYPE html>
<html lang=\'zh-cmn-Hans\'>
<head>
<head>
<meta charset=\'utf-8\'>
<meta name=\'viewport\' c>
<link rel=\'stylesheet\' href=\'http://2q27731p38.iok.la:33058/weui/weui.min.css\'/>
<link rel=\'stylesheet\' href=\'http://2q27731p38.iok.la:33058/weui/weui.me.css\'/>
<link rel=\'icon\' href=\'data: ;base64,=\'>
<title></title>
<script src=\'http://2q27731p38.iok.la:33058/weui/weui.me.js\'></script>
</head>
<body on
<body onload()\'>
<form method=\'post\' enctype=\'multipart/form-data\' id=\'form1\' name =\'form1\' action =\'test.htm\'>
<div class=\'fox_group\'>
<div id=\'\' name=\'\' class=\'weui_cells_title\'>客户资料</div>
<div class=\'weui_cells weui_cells_form\' id=\'ipg1\' name=\'ipg1\'>
<div class=\'weui_cell\'>
<div class=\'weui_cell_hd\'><label class=\'weui_label\'>姓名</label></div>
<div class=\'weui_cell_bd weui_cell_primary\'>
<input id=\'姓名\' name=\'姓名\' type=\'Text\' class=\'weui_input\' value=\'舒淇\'/>
</div>
</div>
<div class=\'weui_cell\'>
<div class=\'weui_cell_hd\'><label class=\'weui_label\'>年龄</label></div>
<div class=\'weui_cell_bd weui_cell_primary\'>
<input id=\'年龄\' name=\'年龄\' type=\'number\' class=\'weui_input\' value=\'28\'/>
</div>
</div>
<div class=\'weui_cell\'>
<div class=\'weui_cell_hd\'><label class=\'weui_label\'>日期</label></div>
<div class=\'weui_cell_bd weui_cell_primary\'>
<input id=\'日期\' name=\'日期\' type=\'date\' class=\'weui_input\' value=\'2012-10-12\'/>
</div>
</div>
  <div class=\'weui_cell\'>
<div class=\'weui_cell_bd weui_cell_primary\'>
 <div class=\'weui_uploader\'>
<div class=\'weui_uploader_hd weui_cell\'>
<div class=\'weui_cell_bd weui_cell_primary\'>图片</div>
</div>
 <div class=\'weui_uploader_bd\'>
<ul class=\'weui_uploader_files\' id=\'up128_thumbnails\'>
<li data-gid=\'up128_gallery\' data-image=\'http://2q27731p38.iok.la:33058/tp/zm.png\' class=\'weui_uploader_file\' style=\'background-image:url(http://2q27731p38.iok.la:33058/tp/zm.png)\'></li>
<li data-gid=\'up128_gallery\' data-image=\'http://2q27731p38.iok.la:33058/tp/tm.png\' class=\'weui_uploader_file\' style=\'background-image:url(http://2q27731p38.iok.la:33058/tp/tm.png)\'></li>
</ul>
<div class=\'weui_uploader_input_wrp\'>
<div id=\'up128_counter\' class=\'fox_uploader_Counter\'></div>
<input class=\'weui_uploader_input\' type=\'file\' id=\'up128\' name=\'up128\' multiple  data-incremental data-scalewidth=400 />
</div>
</div>
</div>
</div>
</div>
<input name=\'up128_deleted\' id=\'up128_deleted\' hidden></div>
</div>
<div class=\'fox_h_button_group\'>
<div class = \'fox_h_button\'>
<button id=\'search\' name=\'search\' type=\'button\' class=\'weui_btn weui_btn_primary\' >添加</button>
</div>
</div>
</form>
<div id=\'up128_gallery\' name=\'up128_gallery\' class=\'weui-gallery\' style=\'display:none\' data-autohide data-images=\'http://2q27731p38.iok.la:33058/tp/zm.png|http://2q27731p38.iok.la:33058/tp/tm.png\'>
<span class=\'weui-gallery__img delete\' style=\'background-image: url(http://2q27731p38.iok.la:33058/tp/zm.png);\'></span>
<div class=\'weui-gallery__opr\'>
<a class=\'weui-gallery__del\' href=\'javascript:; \' data-uid=\'up128\'>
<i class=\'weui_icon_delete weui-icon_gallery-delete\'></i>
</a>
</div>
</div>
<script>function aa(){



var s = "<li data-gid=\'up128_gallery\' data-image=\'http://2q27731p38.iok.la:33058/tp/bb.png\' class=\'weui_uploader_file\' style=\'background-image:url(http://2q27731p38.iok.la:33058/tp/bb.png)\'></li>"
s = s + "<li data-gid=\'up128_gallery\' data-image=\'http://2q27731p38.iok.la:33058/tp/bzxj.png\' class=\'weui_uploader_file\' style=\'background-image:url(http://2q27731p38.iok.la:33058/tp/bzxj.png)\'></li>"


document.getElementById("up128_thumbnails").innerHTML = s;


var a ="<div id=\'up128_gallery\' name=\'up128_gallery\' class=\'weui-gallery\' style=\'display:none\' data-autohide data-images=\'http://2q27731p38.iok.la:33058/tp/bb.png|http://2q27731p38.iok.la:33058/tp/bzxj.png\'>"
a = a + "<span class=\'weui-gallery__img delete\' style=\'background-image: url(http://2q27731p38.iok.la:33058/tp/bb.png);\'></span>"


a = a +"<div class=\'weui-gallery__opr\'>"
a = a + "<a class=\'weui-gallery__del\' href=\'javascript:; \' data-uid=\'up128\'>"
a = a + "<i class=\'weui_icon_delete weui-icon_gallery-delete\'></i>"
a = a + "</a>"
a = a + "</div>"

document.getElementById("up128_gallery").setAttribute("data-images","http://2q27731p38.iok.la:33058/tp/bb.png|http://2q27731p38.iok.la:33058/tp/bzxj.png");


} </script>

</body>
</html>

[此贴子已经被作者于2022/7/19 16:12:01编辑过]
--  作者：有点蓝
--  发布时间：2022/7/19 15:59:00
--  
新增的图片要添加到这里

<div id=\'up128_gallery\' name=\'up128_gallery\' class=\'weui-gallery\' style=\'display:none\' data-autohide data-images=\'http://2q27731p38.iok.la:33058/tp/zm.png|http://2q27731p38.iok.la:33058/tp/tm.png|http://2q27731p38.iok.la:33058/tp/新的xx图片.png\'>
--  作者：lshshlxsh
--  发布时间：2022/7/19 16:15:00
--  
谢谢老师,缩放是可以的，但是上传的时候获取不到文件
--  作者：有点蓝
--  发布时间：2022/7/19 16:20:00
--  
那么建议还是按常规方式使用weui吧
--  作者：lshshlxsh
--  发布时间：2022/7/20 13:42:00
--  
请问一下老师 能否一键清空上传前选中的所有图片？
--  作者：有点蓝
--  发布时间：2022/7/20 13:51:00
--  
只能一个一个删除。