使用uploadify多文件上传,单个删除上传成功的图片
总体思路:在用uploadify上传成功一张图片,用js生成相应的元素,放到指定的位置,并且加上删除的标志。在保存的时候,把是img的所有的值,放到对应到字段里。
jsp:
<tr>
<td style="width:110px;text-align: right;padding-top: 13px;">实景照片<span style="color: red;">(最多上传5张)</span>:</td>
<td id="realPicTd">
<input type="hidden" name="REAL_PICTURE" id="REAL_PICTURE" value="${pd.REAL_PICTURE}" maxlength="255" style="width:58%;"/> 后台对应的多图片的一个字段
</td>
</tr>
在最后保存的时候的操作:把你上传的文件,用js拼接好元素放到指定的位置。
var chk_value ="";
var i = 0;
$("#Form").find('input[name="img"]').each(function(){
if(i == 0){
chk_value = chk_value +$(this).val();
}else{
chk_value = chk_value + "," + $(this).val();
}
i++;
});
$("#REAL_PICTURE").val(chk_value);
js:
$("#uploadify2").uploadify({
'buttonImg' : locat+"/plugins/uploadify/uploadp.png",
'uploader' : locat+"/plugins/uploadify/uploadify.swf",
'script' : locat+"/plugins/uploadify/uploadFile.jsp",
'cancelImg' : locat+"/plugins/uploadify/cancel.png",
'folder' : locat+"/uploadFiles/twoDimensionCode",//上传文件存放的路径,请保持与uploadFile.jsp中PATH的值相同
'queueId' : "fileQueue",
'queueSizeLimit' : 5,//限制上传文件的数量
//'fileExt' : "*.rar,*.zip",
//'fileDesc' : "RAR *.rar",//限制文件类型
'fileExt' : '*.jpg;*.gif;*.png',
'fileDesc' : 'Please choose(.JPG, .GIF, .PNG)',
'auto' : false,
'multi' : true,//是否允许多文件上传
'simUploadLimit': 1,//同时运行上传的进程数量
'buttonText': "files",
'scriptData': {'uploadPath':'/uploadFiles/twoDimensionCode/'},//这个参数用于传递用户自己的参数,此时'method' 必须设置为GET, 后台可以用request.getParameter('name')获取名字的值
'method' : "GET",
'onComplete':function(event,queueId,fileObj,response,data){
str = response.trim();//单个上传完毕执行
var pathTemp = $("#path").val();
var pathTemp1 = pathTemp.substring(0,pathTemp.lastIndexOf("/"));
var path = pathTemp1 +'/'+ str;//图片路径
var num = parseInt(document.getElementById("num").value);
if(num>=5){
//不做操作
}else{
var numtemp = num + 1;
var inputname = "img" + numtemp;
var realPicTd = document.getElementById("realPicTd");
var div = document.createElement("div");
div.setAttribute("id", inputname);
div.style.width = "100px";
div.style.height = "96px";
div.style.textAlign = "center";
div.style.float = "left";
div.style.marginLeft = "10px";
var img = document.createElement("img");
img.style.width = "100px";
img.style.height = "70px";
img.src = path;
var input = document.createElement("input");
input.setAttribute("name", "img");
input.setAttribute("type", "hidden");
input.setAttribute("value", str );
var a = document.createElement("a");
a.innerHTML = "删除";
a.style.color = "red";
var deleteName = "deleteImg('"+inputname+"')";
a.setAttribute("onclick",deleteName);
a.style.cursor = "pointer";
div.appendChild(img);
div.appendChild(input);
div.appendChild(a);
realPicTd.appendChild(div);
$("#num").val(numtemp);
}
},
'onAllComplete' : function(event,data) {
//alert(str); //全部上传完毕执行
},
'onSelect' : function(event, queueId, fileObj){
$("#hasTp1").val("ok");
}
});
效果:
使用uploadify多文件上传,单个删除上传成功的图片的更多相关文章
- Springmvc+uploadify实现文件带进度条批量上传
网上看了很多关于文件上传的帖子,众口不一,感觉有点乱,最近正好公司的项目里用到JQuery的uploadify控件做文件上传,所以整理下头绪,搞篇文档出来,供亲们分享. Uploadify控件的主要优 ...
- WebUploader 解决文件多次上传和删除上传文件的问题
文件多次上传有两种情况: 1. 上传前的多次选择 2. 上传成功后,再次选择 其实API上,已经有了介绍了,不知道为什么有同学还是不知道如何做,我来抛砖引玉吧. 配置项: duplicate {Boo ...
- java 通过sftp服务器上传下载删除文件
最近做了一个sftp服务器文件下载的功能,mark一下: 首先是一个SftpClientUtil 类,封装了对sftp服务器文件上传.下载.删除的方法 import java.io.File; imp ...
- Uploadify多文件上传插件.NET使用案例+PHP使用案例
ploadify是一个非常好用的多文件上传插件 插件下载:http://www.uploadify.com 下载后需要用到的文件: 接下来就是直接添加代码: Default.aspx代码 <%@ ...
- SSH深度历险记(九) Struts2+DWZ+Uploadify多文件(文件和图片等。)上传
在gxpt_uas系统,为了实现文件(文件和图片等.,灵活配置)批量上传到mongodb,在学习的过程中,知道mongodb,功能,实现思路:在DWZ的基础上參考官方的实例结合现有的GXPT来实现,期 ...
- [Asp.net]通过uploadify将文件上传到B服务器的共享文件夹中
写在前面 客户有这样的一个需求,针对项目中文档共享的模块,客户提出如果用户上传特别的大,或者时间久了硬盘空间就会吃满,能不能将这些文件上传到其他的服务器?然后就稍微研究了下这方面的东西,上传到网络中的 ...
- 文件上传利器JQuery上传插件Uploadify
在做日常项目中,经常在后台需要上传图片等资源文件,之前使用过几次这个组件,感觉非常好用 ,但是每次使用的时候都是需要经过一番查阅,所以还不如记住在这里,以后使用的时候就翻翻. 他的官方网站如下:htt ...
- github 上传或删除 文件 命令
git clone https://github.com/onionhacker/bananaproxy.git cd ~/../.. git config --global user.email & ...
- Struts2 文件上传,下载,删除
本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...
随机推荐
- 编写hadoop程序,并打包jar到hadoop集群运行
windows环境下编写hadoop程序 新建:File->new->Project->Maven->next GroupId 和ArtifactId 随便写(还是建议规范点) ...
- js-ES6学习笔记-编程风格(1)
1.ES6提出了两个新的声明变量的命令:let和const.其中,let完全可以取代var,因为两者语义相同,而且let没有副作用. 2.var命令存在变量提升效用,let命令没有这个问题.建议不再使 ...
- 【代码笔记】iOS-performSelector
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...
- js 从URL上获取参数
//获取匹配的 function getUrlParam(name) { var reg = new RegExp("(^|&)" + ...
- Flutter Dart中的异步
以下内容从官网得到: https://webdev.dartlang.org/articles/performance/event-loop Even-Looper Dart是单线程模型,也就没有了所 ...
- android:首页点击返回键,两秒内再次点击退出系统
//记录用户首次点击返回键的时间 private long firstTime = 0; /** * 通过监听keyUp 实现双击返回键退出程序 * @param keyCode * @param e ...
- 关于网站开发中div标签中设置宽度后其中文本溢出的原因和解决方法
一.问题产生的原因 当我们为div标签声明了宽度,但是仍然会出现文本越界的情况,不知道大家有没有发现,只有文本内容为单词或者纯数字的时候才会出现这种情况为此我特意测试了两种情况,结果如下: ①当文本内 ...
- WebView动态注入JavaScript脚本
Demo地址:https://gitee.com/chenyangqi/YouMeDai 背景介绍 在Android与JavaScript交互一文中学习了原生和JS交互,但是如果我们想和别人开发好的w ...
- 耐克的定制页用canvas如何实现....跪求前端大神指点。
选择鞋子的鞋底 鞋底会变色,也可以添加自己定制的id,这个东西看的是用canvas做的,但是小弟确实不知道怎么去做,求大神指点一二,不胜感激! nike的定制页地址:http://store.nike ...
- Python+Selenium笔记(十二):数据驱动测试
(一) 前言 通过使用数据驱动测试,实现对输入值和预期结果的参数化.(例如:输入数据和预期结果可以直接读取Excel文档的数据) (二) ddt 使用ddt执行数据驱动测试,ddt库可以将测试 ...