JQuery批量上传插件uploadify， springMVC实现

来源：互联网发布：初学者羽毛球拍知乎编辑：程序博客网时间：2024/05/18 20:10

这个插件简单好用，下面进入正题：

1.引入js和css

<link rel="stylesheet" type="text/css" href="css/uploadify.css">  <script type="text/javascript" src="js/jquery.uploadify.min.js"></script>

2.js代码

$("#uploadify1").uploadify({'uploader' : '${remoteURL}/informationManager/uploadFeedImgMultipart',//后台处理的请求'swf' : '${remoteURL}/static/uploadify/uploadify.swf','cancelImg' : '${remoteURL}/static/uploadify/cancel.png','buttonImg' : 'uploadify/buttonImg.png','queueID' : 'fileQueue', 'fileDataName' : "files",'buttonText' : '上传','fileObjName' : 'files','auto' : false,'multi' : true,'simUploadLimit' : 999,'simUploadLimit' : 3,'fileExt' : '*.png;*.gif;*.jpg;*.bmp;*.jpeg;*.flv','fileDesc' : '图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)','onUploadStart' : function(file) {  $("#uploadify1").uploadify("settings", "formData", { 'type': 2}); //在onUploadStart事件中，也就是上传之前，把参数写好传递到后台。  },onUploadSuccess : function(file, data, response) {var json = eval('(' + data + ')');var feedAttachIds = $("#feedAttachIds").val();feedAttachIds += json.feedAttachId + ":";var trs = [];trs.push('<li  id="'+json.feedAttachId+'" class="span2">');trs.push('<a href="#" class="thumbnail">');trs.push('<img src="${remoteURL}'+json.urlPath+'" alt="" />');trs.push('</a>');trs.push('<div class="actions">');trs.push('<a title="" href="www.hao123.com"><i class="icon-pencil icon-white"></i></a>');trs.push('<a title="" onClick="removeAttach('+ json.feedAttachId+ ')" href="#"><i class="icon-remove icon-white"></i></a>');trs.push('</div>');trs.push('</li>');$("#showDiv").append(trs.join(""));$("#feedAttachIds").val(feedAttachIds);},});});

3. html 代码

<div class="control-group"><label class="control-label"></label><div class="controls"><a href="javascript:$('#uploadify1').uploadify('upload','*')">开始上传</a>|<a href="javascript:$('#uploadify1').uploadify('cancel','*')">取消上传</a></div></div><div class="control-group" id="fileQueue" style="width: 700px; height: 100px; border: 0px solid blue;"></div>

4.java代码

@RequestMapping(value = "/uploadFeedImgMultipart", method = RequestMethod.POST)public void upload(@RequestParam("files") MultipartFile[] files)throws Exception {MessageInfo messageInfo = new MessageInfo();for (int i = 0; i < files.length; i++) {Map<String, String> map = new HashMap<String, String>();Long fileSize = files[i].getSize();String name = files[i].getOriginalFilename();String path = request.getSession().getServletContext().getRealPath("/")+ "/uploads/feed/image/";System.out.println("path-----------:"+path);SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");String ymd = sdf.format(new Date());path += ymd + "/";File servletFile = new File(path);if (!servletFile.exists()) {try {servletFile.mkdirs();} catch (Exception e) {e.printStackTrace();}}SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");String url = df.format(new Date()) + new Random().nextInt(1000)+ "_" + name;FileUtil.createFile(files[i], path + "/" + url);map.put("filePath", "/uploads/feed/image/" + ymd + "/" + url);map.put("fileSize", String.valueOf(fileSize));map.put("fileName", name);map.put("code", "image");super.responseJson(response, messageInfo);}

5.注意：

queueID的值要和下面的div ID一致（本文是fileQueue

）

0 0