fileupload异步上传多个图片
1.页面<table><tr><td></td> <td height="150" width="300"> <div id="product1"> <input id="coverPicture_url" name="coverPicture" type="hidden" value=""> <img id="coverPicture_img" style="display: none" src="" alt="" width="200px" height="200px"> </div> 封面: <a href="javascript:;" > <input upImg="true" id="fm" name="pic" type="file" data-url="${ctx}/upload/uploadPic"
multiple="multiple" />
</a> </td> <td height="150" width="350"> <div id="product2"> <input id="carouselPicture1_url" name="carouselPicture1" type="hidden" value=""> <img id="carouselPicture1_img" style="display: none" src="" alt="" width="200px" height="200px"> </div> 轮播图片1:<a href="javascript:;" > <input upImg="true" id="lbtp1" name="pic" type="file" data-url="${ctx}/upload/uploadPic"
multiple="multiple" /> </a> </td> <td height="150"> <div id="product3"><input id="carouselPicture2_url" name="carouselPicture2" type="hidden" value=""> <img id="carouselPicture2_img" style="display: none" src="" alt="" width="200px" height="200px"> </div> 轮播图片2:<a href="javascript:;" > <input upImg="true" id="lbtp2" name="pic" type="file" data-url="${ctx}/upload/uploadPic"
multiple="multiple" /> </a> </td></tr><tr><td></td> <td height="150" width="350"> <div id="product4"><input id="carouselPicture3_url" name="carouselPicture3" type="hidden" value=""> <img id="carouselPicture3_img" style="display: none" src="" alt="" width="200px" height="200px"></div> 轮播图片3:<a href="javascript:;" > <input upImg="true" id="lbtp3" name="pic" type="file" data-url="${ctx}/upload/uploadPic"
multiple="multiple" /> </a> </td> <td height="150" width="350"> <div id="product5"><input id="carouselPicture4_url" name="carouselPicture4" type="hidden" value=""> <img id="carouselPicture4_img" style="display: none" src="" alt="" width="200px" height="200px"></div> 轮播图片4:<a href="javascript:;" > <input upImg="true" id="lbtp4" name="pic" type="file" data-url="${ctx}/upload/uploadPic"
multiple="multiple" /> </a> </td> <td height="150"> <div id="product6"><input id="carouselPicture5_url" name="carouselPicture5" type="hidden" value=""> <img id="carouselPicture5_img" style="display: none" src="" alt="" width="200px" height="200px"></div> 轮播图片5:<a href="javascript:;" > <input upImg="true" id="lbtp5" name="pic" type="file" data-url="${ctx}/upload/uploadPic"
multiple="multiple" /> </a> </td> </tr></table>2.脚本//定义图片组件var list = [{"fileBtnId":"fm","imgId":"coverPicture_img","urlId":"coverPicture_url"},{"fileBtnId":"lbtp1","imgId":"carouselPicture1_img","urlId":"carouselPicture1_url"},{"fileBtnId":"lbtp2","imgId":"carouselPicture2_img","urlId":"carouselPicture2_url"},{"fileBtnId":"lbtp3","imgId":"carouselPicture3_img","urlId":"carouselPicture3_url"},{"fileBtnId":"lbtp4","imgId":"carouselPicture4_img","urlId":"carouselPicture4_url"},{"fileBtnId":"lbtp5","imgId":"carouselPicture5_img","urlId":"carouselPicture5_url"}];//初始加载$(function(){//图片上传初始化for(var index = 0,l = list.length;index<l;index++){fileUpload(list[index].fileBtnId,list[index].imgId,list[index].urlId);}});//图片上传function fileUpload(fileBtnId,imgId,urlId){$('#'+fileBtnId).fileupload({dataType: 'json',done: function (e,data) {$('#'+urlId).val(data.result.url);$('#'+imgId).css('display','block');$('#'+imgId).attr('src',data.result.url);}});}3.Controller(这部分根据自己项目来定)@Controller@RequestMapping("/upload")public class UploadController {@RequestMapping(value="uploadPic") public void uploadPic(@RequestParam(required = false) MultipartFile pic,
HttpServletResponse response) throws Exception { String ext = FilenameUtils.getExtension(pic.getOriginalFilename()); //生成策略 DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS"); String format = df.format(new Date()); Random r = new Random(); for(int i = 0 ; i < 3 ;i++){ format += r.nextInt(10); } //实例jersey Client client = new Client(); //保存db String path = "upload/"+format+"."+ext; String ip = "http://119.57.156.12:8080/image-web/"; //另一台服务器的请求路径 String url = ip + path; //设置请求路径 WebResource resource = client.resource(url); //发送开始 resource.put(String.class,pic.getBytes()); //返回 JsonMapper mapper = new JsonMapper(); Map<String,Object> map = new HashMap<String,Object>(); map.put("url", url); map.put("path", path); response.setContentType("text/html"); response.getWriter().write( mapper.toJson(map) ); response.flushBuffer(); }}这里边用到的是fileupload插件。使用还要加上必要的脚本文件。<script type="text/javascript" src="${ctx}/resources/fileupload/jquery.fileupload.js"></script><script type="text/javascript" src="${ctx}/resources/fileupload/jquery.ui.widget.js"></script><script type="text/javascript" src="${ctx}/resources/fileupload/jquery.iframe-transport.js"></script><script type="text/javascript" src="${ctx}/resources/fileupload/jquery.fileupload.js"></script><script type="text/javascript" src="${ctx}/resources/easyui/jquery.min.js"></script>其实还有好多插件支持此功能。
fileupload异步上传多个图片相关推荐
- springmvc + ajaxfileupload 实现异步上传文件(图片)
最近在做一个项目需要实现异步上传图片,在网上找了很多资料后,采用了ajaxfileupload可以实现,以下是核心代码: jsp: <!-- 上传窗口 --> <div id=&qu ...
- php上传图文,php+ajax实现异步上传图文功能详解
这篇文章主要为大家详细介绍了php+ajax实现异步上传文件或图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文为大家分享了ajax异步上传文件或图片功能的具体代码,供大家参考,具体内容 ...
- java上传头像插件_JSP+SpringMVC框架使用WebUploader插件实现注册时候头像图片的异步上传功能...
一.去官网下载webuploader文件上传插件 下载好后把它放到Javaweb项目的文件夹中(我放到了webcontent下面的static里面) 二.复制前端的样式 把这段代码放到你想要放到的位置 ...
- html访问手机相册,使用HTML5的FileReader读取手机图片(还可选择拍照), 并自动异步上传到服务器上...
使用html5 FileReader获取图片,并异步上传到服务器(not iframe) body{margin: 0px; background:#f2f2f0;} p{margin:0px;} . ...
- 图片裁剪和异步上传插件--一步到位(记录)
图片上传裁剪这功能随处可见,有的自己写,不过太耗费时间了,插件的话感觉好多,前段时间就想挑一款好的插件,以后就用那款,可是挑了几款插件用上去,效果很好,问题就出在合并了,单一的插件效果是很好的,没问题 ...
- html5 上传图片模板,HTML5实现图片文件异步上传
,过现前个能文使近记接的端问对字用近记接 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段. ...
- jsp使用七牛云API和webuploader上传多组图片
文章目录 jsp使用七牛云API和webuploader上传多组图片 介绍 目录树 遇到的问题 上传组件的选择问题 进度条 多线程 前端界面 数据库 关键代码 UserPhotoDaoImpl Upl ...
- java获取ajax上传的文件,Java使用Ajax异步上传文件
相关代码示例: html代码片段: 名称 class="layui-input"> 描述 文件 请选择配置文件 立即提交 重置 js代码片段: //上传配置文件 $(&quo ...
- jQuery异步上传文件
jQuery异步上传文件 我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="fil ...
最新文章
- LeetCode: 108. Convert Sorted Array to Binary Search Tree
- 5月3日 条件语句、循环语句的复习练习
- DataGrid中添加背景
- 多项式(polynomial)和 单项式(monomial)
- hoj1003 Mixing Milk (哈工大)
- Mysql 中is null 和 =null 的区别
- 前端悬浮窗效果_头条|磁悬浮离心机组迎来市场春天
- Qt只有release
- 自动填充参数_使用orangehill/iseed自动反向生成数据填充文件
- git命令之git rebase 的用法
- 用计算机做设计,做平面设计一般电脑可以吗
- 2018年软件评测师备考之路
- Java switch使用详解
- 域用户创建和计算机加入域
- 谷歌浏览器翻译英文网页功能消失解决方案
- 把Vue项目打包为桌面应用(nwjs)
- FFmpeg mov_read_ftyp函数剖析
- 自定义滚动条使用(scrollbar样式设置)
- 怎样使用计算机的桌面助手,360安全卫士如何整理电脑桌面?360桌面助手使用说明...
- 黑客黑掉15万台打印机,可打印任意文档