java选中多张图片上传

实现不走以及效果如下：
1：点击：

2：弹出：

3：选择多张图片：

4：选中之后，点击打开，图片显示出来：

5：实现代码如下：

前台页面：

    <!-- 新商品详情图片--><a href="javascript:void(0);" class="btn_addPic"><span id="imgTitle">上传自定义详情图</span>                                                                    <input type="file" name="file" id="logoFile2" onchange="setImg2(this);" class="selectedLogoImgId"accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/></a><br/><font color="red">图片尺寸：750*300（支持多图批量上传）</font><div class="cp-img" id="logoImgDiv6"><ul id="detailImgs" style="overflow: hidden;"><li style="display:none;" id="P0">                                       </ul><span id="hiddenss1"></span></div>

js页面：

function setImg2(obj){//用于进行图片上传，返回地址var f=$(obj).val();if(f == null || f ==undefined || f == ''){return false;}else if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f)){alertLayel("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");$(obj).val('');return false;}else{//批量上传图片$.ajaxFileUpload({url:"/business/uploadImgList.html",//需要链接到服务器地址   secureuri:false,  fileElementId:"logoFile2",//文件选择框的id属性  ,//文件选择框的id属性  dataType: 'json',   //json contentType: false,    //不可缺processData: false,    //不可缺success: function (data){if(data!=null){$.each(data,function(i,url){//拼接图片列表 var id = $('#detailImgs li:last').attr('id');id = id.substr(1);id = parseInt(id) + 1;var ids=id;id = 'P'+id;                                                    var a_hidden="<li id='"+ id +"'><input type='hidden' value='"+url+"' name='imgs'>";var img_html="<img  src='"+url+"'  onclick='showOriginal(this)' original='"+url+"'>";var a_html="<a href='javascript:void(0);' onclick='delespan1("+ids+")'>删除</a>";var li_html="</li>";$('#detailImgs').append(a_hidden+img_html+a_html+li_html);});}else{alertLayel("上传失败");$("#url").val("");$(obj).val('');}                   },error:function(XMLHttpRequest, textStatus, errorThrown){  alertLayel("上传失败，请检查网络后重试");$("#url").val("");$(obj).val('');} });}}
上传之后如果感觉有张上传错了，想删除怎么办：function delespan1(id){$('#P'+id).remove();}

后台代码：

  import org.springframework.web.multipart.MultipartFile;import java.io.File;
/*** @Description: 批量上传图片文件* @author: qinzz* @date: 2017年03月31日* @return:String*/
@ResponseBody
@RequestMapping("/uploadImgList.html")
public String uploadPictureList(@RequestParam(value="file",required=false)MultipartFile[] file,HttpServletRequest request){File targetFile=null;String msg="";//返回存储路径int code=1;List imgList=new ArrayList();if (file!=null && file.length>0) {for (int i = 0; i < file.length; i++) {String fileName=file[i].getOriginalFilename();//获取文件名加后缀if(fileName!=null&&fileName!=""){   String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/upload/imgs/";//存储路径String path = request.getSession().getServletContext().getRealPath("upload/imgs"); //文件存储位置String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀fileName=new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;//新的文件名//先判断文件是否存在String fileAdd = DateUtil.format(new Date(),"yyyyMMdd");File file1 =new File(path+"/"+fileAdd); //如果文件夹不存在则创建    if(!file1 .exists()  && !file1 .isDirectory()){       file1 .mkdir();  }targetFile = new File(file1, fileName);try {file[i].transferTo(targetFile);msg=returnUrl+fileAdd+"/"+fileName;imgList.add(msg);} catch (Exception e) {e.printStackTrace();}}}}               return JSON.toJSONString(imgList);
}
```
点击保存之后的后台代码，form表单提交：

将上传的多张图片保存在图片表里面，并设置一个外键与主表的主键关联，以便查询的时候关联显示。@RequestMapping("/add.html")public String add(@RequestParam(value = "imgs", required = false) String[] imgs){if(imgs != null && imgs.length>0){for (String string : imgs) {MallProductDetailImgs img = new MallProductDetailImgs();img.setImgUrl(string);img.setProductId(product.getId());img.setCreateDateTime(new Date());img.setUpdateTime(new Date());img.setStatus(Byte.parseByte("1"));img.setInvalid(false);mallProductDetailImgsService.insertSelective(img);}}}

java选中多张图片上传相关推荐

php上传多张图片为什么只显示一张,javascript,_js多张图片上传也拿到多张图片的路径在页面上展示只显示一张？只执行了一次？？？，javascript - phpStudy...
js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? js多张图片上传也拿到多张图片的路径在页面上展示只显示一张?只执行了一次??? self.$els.upload ...
php mysql上传多张图片_PHP实现一次性多张图片上传功能
原标题:PHP实现一次性多张图片上传功能最近遇到一个需求,就是多张图片上传,按住Ctrl键能选择多张图片一次性上传,上传成功后数据库保存图片的路径及图片原来的文件名.该功能一般在比较成熟的内容编辑器 ...
java读excel乱码,【java 项目中，上传的excel打开时无法正常打开，显示乱码，怎样可以正常打开，】java读取excel乱码...
java 项目中,上传的excel打开时无法正常打开,显示乱码 ,怎样可以正常打开, 1.转换格就是将受损的Excel XP簿另存格式选为SYLK.如果可以打开受件,只是不能进行各种编辑和打印操作,那 ...
调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
仿微信图片选择及多张图片上传
最近做项目涉及到图片上传这块,多张图片上传是用xutils实现的,图片选择.预览是参考了微信图片选择的demo,先上图: 这是网上参考了仿微信图片上传实现的,这里就不多讲了,文章底部有下载链接,下面介 ...
java获取ajax上传的文件,Java使用Ajax异步上传文件
相关代码示例: html代码片段: 名称 class="layui-input"> 描述文件请选择配置文件立即提交重置 js代码片段: //上传配置文件 $(&quo ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
java语言文件上传,java中实现文件上传的方法
java中实现文件上传的方法发布时间:2020-06-19 10:29:11 来源:亿速云阅读:86 作者:Leah 这篇文章给大家分享的是java中实现文件上传的方法,相信大部分人都还没学会这个 ...
flex java red5_使用 Flex 和Java servlets 将文件上传到 RED5 服务器的步骤
本文使用一个 demo 来演示如何使用 Flex 和 Java servlets 上传一个任意类型的本地文件到 RED5 服务器.使用的是 Flex 的 FileReference 接口,该接口可以对 ...

java选中多张图片上传

java选中多张图片上传相关推荐

最新文章

热门文章