Foxtable(狐表)用户栏目专家坐堂 → 动态添加图片


  共有5150人关注过本帖树形打印复制链接

主题:动态添加图片

帅哥哟,离线,有人找我吗?
lshshlxsh
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:三尾狐 帖子:655 积分:7779 威望:0 精华:0 注册:2013/12/11 17:49:00
动态添加图片  发帖心情 Post By: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编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
有点蓝
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:超级版主 帖子:109489 积分:557107 威望:0 精华:9 注册:2015/6/24 9:21:00
  发帖心情 Post By: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
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:三尾狐 帖子:655 积分:7779 威望:0 精华:0 注册:2013/12/11 17:49:00
  发帖心情 Post By:2022/7/19 16:15:00 [只看该作者]

谢谢老师,缩放是可以的,但是上传的时候获取不到文件

 回到顶部
帅哥哟,离线,有人找我吗?
有点蓝
  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:超级版主 帖子:109489 积分:557107 威望:0 精华:9 注册:2015/6/24 9:21:00
  发帖心情 Post By:2022/7/19 16:20:00 [只看该作者]

那么建议还是按常规方式使用weui吧

 回到顶部
帅哥哟,离线,有人找我吗?
lshshlxsh
  5楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:三尾狐 帖子:655 积分:7779 威望:0 精华:0 注册:2013/12/11 17:49:00
  发帖心情 Post By:2022/7/20 13:42:00 [只看该作者]

请问一下老师 能否一键清空上传前选中的所有图片?

 回到顶部
帅哥哟,离线,有人找我吗?
有点蓝
  6楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:超级版主 帖子:109489 积分:557107 威望:0 精华:9 注册:2015/6/24 9:21:00
  发帖心情 Post By:2022/7/20 13:51:00 [只看该作者]

只能一个一个删除。

 回到顶部