使用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 ...
随机推荐
- mybatis-plus排除非表中字段
使用 transient 修饰 private transient String noColumn; 使用 static 修饰 private static String noColumn; 使用 T ...
- Windows平台如何部署scrapy
0.安装Anaconda 这个不教了,自己去Anaconda官网上下个安装包,装上就好. https://www.anaconda.com/distribution/ 1.使用Anaconda创建一个 ...
- 自定义MVC框架之工具类-模型类
截止目前已经改造了5个类: ubuntu:通过封装验证码类库一步步安装php的gd扩展 自定义MVC框架之工具类-分页类的封装 自定义MVC框架之工具类-文件上传类 自定义MVC框架之工具类-图像处理 ...
- python学习之老男孩python全栈第九期_day002作业
1. 判断下列逻辑语句的True,False.(1) 1 > 1 or 3 < 4 or 4 > 5 and 2 > 1 and 9 > 8 or 7 < 6Tru ...
- python学习之老男孩python全栈第九期_day005作业
1,有如下变量(tu是个元组),请实现要求的功能. tu = ("alex", [11, 22, {"k1": 'v1', "k2": [& ...
- JavaSE——多线程实现的两种方式
Thread类: 创建新执行线程有两种方法. 一种方法是将类声明为 Thread 的子类.该子类应重写 Thread 类的 run 方法.接下来可以分配并启动该子类的实例.例如,计算大于某一规定值的质 ...
- SQLServer 事物与索引
SqlServer 事物与索引 分享by:授客 QQ:1033553122 详情点击百度网盘分享链接: SqlServer 事物与索引.ppt
- OpenCV 图片美化
1.彩色直方图 def ImgHist(image,type): color = (255,255,255) windowName='gray' if type==31: color=(255,0,0 ...
- 页面可见性判断:document.hidden与visibilitychange事件
我们需要在特定的时候判断页面的显示状态,例如:当视频加载到可播放状态时,根据用户是否停留在当前页面来决定是否开始自动播放.页面的展示的状态的判断就需要用到html5新增的一个api:document. ...
- Problem2-Project Euler
Even Fibonacci numbers Each new term in the Fibonacci sequence is generated by adding the previous ...