使用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 ...
随机推荐
- 浙大月赛ZOJ Monthly, August 2014
Abs Problem Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge Alice and Bob is playing a ga ...
- Listary Pro- 文件浏览与搜索增强的超级神器
Listary 是一款 Windows 文件浏览增强工具,为 Windows 资源管理器增加智能命令.最近文档以及收藏功能.文件小,功能强大.秒杀系统自带搜索功能!! 它是一款非常优秀的 Window ...
- 华中农业大学第五届程序设计大赛网络同步赛-L
L.Happiness Chicken brother is very happy today, because he attained N pieces of biscuits whose tast ...
- js 下拉加载
// 下拉加载 var clientHeight = $(window).height() //当前可视的页面高度 console.log(clientHeight) //滚动条到页面底部 ...
- C#版Aliyun DNS API
阿里云解析API,是为域名开发者.注册商.域名代理商等提供的开放和便捷的解析服务接口.API依托于万网云解析服务,可以方便的管理域名和解析记录,让你的解析管理变的随心省时自由舒畅. 一.先附上Aliy ...
- SharePoint designer workflow给一个hyperlink类型得field赋值, How to set value to a hyperlink field by designer workflow
通过worlfow给一个链接类型得field赋值: 格式是: {link}, {linkDisplayname} 一定要注意逗号后面有个空格. 举个栗子: 如果一个链接显示为 Approve / Re ...
- SQLServer 学习笔记之超详细基础SQL语句 Part 4
Sqlserver 学习笔记 by:授客 QQ:1033553122 -----------------------接Part 3------------------- 17 带比较运算符的嵌套查询 ...
- flutter 调用原生(获取当前设备电池电量)
代码: import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'dart:asy ...
- 对Controller的单元测试
在ASP.NET MVC项目的Controller中存在逻辑代码,也需要单元测试.查阅到的资料上,有说ASP.NET MVC框架在设计时便考虑到了满足可测试性,所以相对aspx.Winform来说针对 ...
- Hive使用SequenceFile存储数据
SequenceFile是使用二进制保存数据,是可以压缩的,并且压缩后的数据可被分割,可以供mapreduce处理. 下面的实例使用SequenceFile保存Hive表的数据,并且使用了压缩. se ...