总体思路:在用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多文件上传,单个删除上传成功的图片的更多相关文章

  1. Springmvc+uploadify实现文件带进度条批量上传

    网上看了很多关于文件上传的帖子,众口不一,感觉有点乱,最近正好公司的项目里用到JQuery的uploadify控件做文件上传,所以整理下头绪,搞篇文档出来,供亲们分享. Uploadify控件的主要优 ...

  2. WebUploader 解决文件多次上传和删除上传文件的问题

    文件多次上传有两种情况: 1. 上传前的多次选择 2. 上传成功后,再次选择 其实API上,已经有了介绍了,不知道为什么有同学还是不知道如何做,我来抛砖引玉吧. 配置项: duplicate {Boo ...

  3. java 通过sftp服务器上传下载删除文件

    最近做了一个sftp服务器文件下载的功能,mark一下: 首先是一个SftpClientUtil 类,封装了对sftp服务器文件上传.下载.删除的方法 import java.io.File; imp ...

  4. Uploadify多文件上传插件.NET使用案例+PHP使用案例

    ploadify是一个非常好用的多文件上传插件 插件下载:http://www.uploadify.com 下载后需要用到的文件: 接下来就是直接添加代码: Default.aspx代码 <%@ ...

  5. SSH深度历险记(九) Struts2+DWZ+Uploadify多文件(文件和图片等。)上传

    在gxpt_uas系统,为了实现文件(文件和图片等.,灵活配置)批量上传到mongodb,在学习的过程中,知道mongodb,功能,实现思路:在DWZ的基础上參考官方的实例结合现有的GXPT来实现,期 ...

  6. [Asp.net]通过uploadify将文件上传到B服务器的共享文件夹中

    写在前面 客户有这样的一个需求,针对项目中文档共享的模块,客户提出如果用户上传特别的大,或者时间久了硬盘空间就会吃满,能不能将这些文件上传到其他的服务器?然后就稍微研究了下这方面的东西,上传到网络中的 ...

  7. 文件上传利器JQuery上传插件Uploadify

    在做日常项目中,经常在后台需要上传图片等资源文件,之前使用过几次这个组件,感觉非常好用 ,但是每次使用的时候都是需要经过一番查阅,所以还不如记住在这里,以后使用的时候就翻翻. 他的官方网站如下:htt ...

  8. github 上传或删除 文件 命令

    git clone https://github.com/onionhacker/bananaproxy.git cd ~/../.. git config --global user.email & ...

  9. Struts2 文件上传,下载,删除

    本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...

随机推荐

  1. mybatis-plus排除非表中字段

    使用 transient 修饰 private transient String noColumn; 使用 static 修饰 private static String noColumn; 使用 T ...

  2. Windows平台如何部署scrapy

    0.安装Anaconda 这个不教了,自己去Anaconda官网上下个安装包,装上就好. https://www.anaconda.com/distribution/ 1.使用Anaconda创建一个 ...

  3. 自定义MVC框架之工具类-模型类

    截止目前已经改造了5个类: ubuntu:通过封装验证码类库一步步安装php的gd扩展 自定义MVC框架之工具类-分页类的封装 自定义MVC框架之工具类-文件上传类 自定义MVC框架之工具类-图像处理 ...

  4. python学习之老男孩python全栈第九期_day002作业

    1. 判断下列逻辑语句的True,False.(1) 1 > 1 or 3 < 4 or 4 > 5 and 2 > 1 and 9 > 8 or 7 < 6Tru ...

  5. python学习之老男孩python全栈第九期_day005作业

    1,有如下变量(tu是个元组),请实现要求的功能. tu = ("alex", [11, 22, {"k1": 'v1', "k2": [& ...

  6. JavaSE——多线程实现的两种方式

    Thread类: 创建新执行线程有两种方法. 一种方法是将类声明为 Thread 的子类.该子类应重写 Thread 类的 run 方法.接下来可以分配并启动该子类的实例.例如,计算大于某一规定值的质 ...

  7. SQLServer 事物与索引

    SqlServer 事物与索引 分享by:授客 QQ:1033553122 详情点击百度网盘分享链接: SqlServer 事物与索引.ppt

  8. OpenCV 图片美化

    1.彩色直方图 def ImgHist(image,type): color = (255,255,255) windowName='gray' if type==31: color=(255,0,0 ...

  9. 页面可见性判断:document.hidden与visibilitychange事件

    我们需要在特定的时候判断页面的显示状态,例如:当视频加载到可播放状态时,根据用户是否停留在当前页面来决定是否开始自动播放.页面的展示的状态的判断就需要用到html5新增的一个api:document. ...

  10. Problem2-Project Euler

    Even Fibonacci numbers   Each new term in the Fibonacci sequence is generated by adding the previous ...