使用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 ...
随机推荐
- Java - 线程让步和休眠
Java多线程系列--“基础篇”06之 线程让步 概要 本章,会对Thread中的线程让步方法yield()进行介绍.涉及到的内容包括:1. yield()介绍2. yield()示例3. yield ...
- 生成证书申请csr文件
一.执行命令 openssl req -nodes -newkey rsa:2048 -keyout liexiulive.key -out liexiulive.csr 二.根据提示输入基本信息 G ...
- python-状态模式
源码地址:https://github.com/weilanhanf/PythonDesignPatterns 说明: 在软件开发过程中,各种应用程序可能会根据不同的情况做出不同的处理.最直接的方案就 ...
- SVG生成字体图标详解
- 微信小程序传参数的几种方法
1,navigator 跳转时 wxml页面(参数多时可用“&”) <navigator url='../index/index?id=1&name=aaa'></n ...
- Webpack 常用命令总结以及常用打包压缩方法
前言:Webpack是一款基于node的前端打包工具,它可以将很多静态文件打包起来,自动处理依赖关系后,生成一个.js文件,然后让html来引用,不仅可以做到按需加载,而且可以减少HTTP请求,节约带 ...
- Vue.js之组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...
- Linux 配置iso系统盘为本地yum源
Linux配置iso系统盘为本地yum源 by:授客 QQ:1033553122 1.目的 安装软件时,经常会遇到包或类库的依赖性问题,为此,我们可以通过yum命令安装软件,尽量避免出现繁琐的软件 ...
- pm2以windows服务运行
借助于pm2-windows-service 可以把pm2以windows服务运行.已服务运行的好处就是,即时用户注销也,pm2也会在后台运行 npm i pm2 -g npm i pm2-windo ...
- 精华阅读第 13 期 |常见的八种导致 APP 内存泄漏的问题
本期是移动开发精英俱乐部的第13期文章,都是以技术为主,所以这里就不过多的进行赘述了,我们直接看干货内容吧!本文系ITOM管理平台OneAPM整理. 实际项目中的MVVM(积木)模式–序章 导读:开篇 ...