jQuery上传文件控件Uploadify使用

http://blog.csdn.net/aqsunkai/article/details/51779184

Uploadify是JQuery的一个上传插件，支持ajax无刷新上传，多个文件同时上传，上传进行进度显示，删除已上传文件等。

首先应下载jQuery和uploadify插件

jQuery下载地址：http://www.jq22.com/jquery-info122

Uploadify下载地址：http://www.uploadify.com/，点击Flash Version

jsp页面需要引入：

[html] view plain copy
 
  1. <script src="<%=basePath%>resources/js/jquery-2.1.4/jquery.min.js"></script>  
  2. <script src="<%=basePath%>resources/js/uploadify/jquery.uploadify.min.js"></script>  
  3. <link type="text/css" rel="stylesheet" href="<%=basePath%>resources/js/uploadify/uploadify.css">  

html代码:

[html] view plain copy
 
  1. <div>  
  2.      <input type="file" name="uploadify" id="uploadFile" />  
  3.      <div id="some_file_queue"></div>  
  4.      <div  id="fileName"></div>  
  5.      <div style="clear: both;margin-top: 20px;cursor: pointer;">  
  6.           <a  
  7.              class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary a-btn"  
  8.              onclick="javascript:$('#uploadFile').uploadify('upload','*')">  
  9.              <span class="glyphicon glyphicon-play"></span> <span  
  10.              class="ui-button-text">开始上传</span>  
  11.           </a><a  
  12.              class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary a-btn"  
  13.              onclick="javascript:$('#uploadFile').uploadify('cancel','*')">  
  14.              <span class="glyphicon glyphicon-ban-circle"></span> <span  
  15.              class="ui-button-text">取消上传</span>  
  16.           </a>  
  17.      </div>  
  18. </div>  

js代码：

[javascript] view plain copy
 
  1. $(function() {  
  2.        $("#uploadFile").uploadify({  
  3.            'swf'           : '<%=basePath%>resources/js/uploadify/uploadify.swf',  
  4.            'uploader'      : '<%=basePath%>file/uploadFile',  //服务器端方法  
  5.            //'formData'    : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据json格式  
  6.            'height'        : 30,  //按钮高度  
  7.            'width'         : 100,  //按钮宽度    
  8.            'fileObjName'   : 'uploadify',//默认 Filedata, $_FILES控件name名称  
  9.            'multi'         : true,  //设置是否允许一次选择多个文件，true为允许，false不允许  
  10.            'auto'          : false,  //是否自动上传  
  11.            'buttonText'    : '选择文件',//按钮显示文字  
  12.            //'buttonClass' : 'uuid', //按钮辅助class  
  13.            'buttonCursor'  : 'hand', //设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头)  
  14.            'debug'         : false, //开启或关闭debug模式  
  15.            'cancelImg'     : '<%=basePath%>resources/js/img/uploadify-cancel.png', //这个没测试出来，默认是放在与uploadify同级的img文件夹下  
  16.            'fileTypeExts'  : '*.jpg;*.jpge;*.gif;*.psd;*.png;*.txt;*.doc;*.docx;*.ppt;*.pptx;*.pdf', //文件后缀限制 默认：'*.*'  
  17.            'fileSizeLimit' : '10MB',//接受一个单位（B,KB,MB,GB）。如果是数字则默认单位为KB。设置为0时表示不限制  
  18.            'fileTypeDesc'  : 'All Files',//可选文件的描述。这个值出现在文件浏览窗口中的文件类型下拉选项中。（chrome下不支持，会显示为'自定义文件',ie and firefox下可显示描述）  
  19.            'method'        : 'post', //提交上传文件的方法，接受post或get两个值，默认为post  
  20.            'progressData'  : 'percentage',//设置文件上传时显示数据，有‘percentage’ or ‘speed’两个参数(百分比和速度)  
  21.            'queueID'       : 'some_file_queue',//设置上传队列DOM元素的ID，上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为false  
  22.            'queueSizeLimit'  : 5,//一个队列上传文件数限制  
  23.            'simUploadLimit'  : 5, //一次同步上传的文件数目  
  24.            'removeCompleted' : true, //完成时是否清除队列 默认true    
  25.            'removeTimeout'   : 1,   //完成时清除队列显示秒数,默认3秒    
  26.            'requeueErrors'   : false, //设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传  
  27.            'successTimeout'  : 30,   //设置文件上传后等待服务器响应的秒数，超出这个时间，将会被认为上传成功，默认为30秒  
  28.            'uploadLimit'     : 99,  //允许上传的最多张数   
  29.            'onUploadSuccess' : function(file, data, response) { //上传成功  
  30.                var jdata = $.parseJSON(data);  
  31.                $("#fileName").append("<p><em name='fileName' onclick = 'downLoadFile(this)' style='color:#555555'>"+jdata.fileName+"</em><em style='color:red' onclick = 'deleteFile(this)'>删除</em><a name='filePath' style='display:none'>"+jdata.filePath+"</a></p>");  
  32.                console.log( 'id: ' + file.id  
  33.                    + ' - 索引: ' + file.index  
  34.     　　　　　　　　　+ ' - 文件名: ' + file.name  
  35.     　　　　　　　　　+ ' - 文件大小: ' + file.size  
  36.     　　　　　　　　　+ ' - 类型: ' + file.type  
  37.     　　　　　　　　　+ ' - 创建日期: ' + file.creationdate  
  38.     　　　　　　　　　+ ' - 修改日期: ' + file.modificationdate  
  39.     　　　　　　　　　+ ' - 文件状态: ' + file.filestatus  
  40.     　　　　　　　　　+ ' - 服务器端消息: ' + data  
  41.     　　　　　　　　　+ ' - 是否上传成功: ' + response);  
  42.             },  
  43.             'onFallback':function(){  
  44.                alert("您未安装FLASH控件，无法一次性上传多个文件！请安装FLASH控件后再试。");  
  45.             },  
  46.             onSelectError:function(file, errorCode, errorMsg){ //选择失败  
  47.                    switch(errorCode) {  
  48.                        case -100:    
  49.                            alert("上传的文件数量已经超出系统限制的"+$('#uploadFile').uploadify('settings','queueSizeLimit')+"个文件！");      
  50.                            break;    
  51.                        case -110:    
  52.                         alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#uploadFile').uploadify('settings','fileSizeLimit')+"大小！");  
  53.                            break;    
  54.                        case -120:    
  55.                            alert("文件 ["+file.name+"] 大小异常！");  
  56.                            break;    
  57.                        case -130:    
  58.                            alert("文件 ["+file.name+"] 类型不正确！");  
  59.                            break;  
  60.                    }  
  61.                },  
  62.               /* //上传汇总 
  63.              'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {   
  64.                  $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');   
  65.               }, 
  66.              'onUploadComplete' : function(file) { //上传完成   
  67.                   console.log('The file ' + file.name + ' finished processing.');   
  68.               },   
  69.               //修改formData数据 ,每个文件即将上传前触发 
  70.               'onUploadStart' : function(file) { 
  71.                   $("#uploadFile").uploadify("settings", "someOtherKey", 2); 
  72.               }, 
  73.               //删除时触发   
  74.               'onCancel' : function(file) { 
  75.                   alert('The file ' + file.name + '--' + file.size + ' was cancelled.');   
  76.               }, 
  77.               //清除队列   
  78.               'onClearQueue' : function(queueItemCount) { 
  79.                   alert(queueItemCount + ' file(s) were removed from the queue');   
  80.               }, 
  81.               //调用destroy是触发   
  82.               'onDestroy' : function() {   
  83.                   alert('我被销毁了');   
  84.               },   
  85.               //每次初始化一个队列是触发   
  86.               'onInit' : function(instance){   
  87.                   alert('The queue ID is ' + instance.settings.queueID);   
  88.               },  
  89.               //上传错误   
  90.               'onUploadError' : function(file, errorCode, errorMsg, errorString) { 
  91.                   alert('The file ' + file.name + ' could not be uploaded: ' + errorString);   
  92.               }, */  
  93.        });  
  94. });  

页面展示：

后台代码：

   上传方法

 

[java] view plain copy
 
  1. @RequestMapping("/uploadFile")  
  2. public void uploadFile(  
  3.     @RequestParam(value = "uploadify", required = false) MultipartFile file,  
  4.     HttpServletRequest request, HttpServletResponse response) throws IOException {  
  5.     String fileName = file.getOriginalFilename();  
  6.     Map<String, Object> dataMap = new HashMap<String, Object>();  
  7.     //本机测试路径  
  8.     String path = request.getSession().getServletContext().getRealPath("files");  
  9.     String uuid = UUID.randomUUID().toString();  
  10.     String filePath = uuid + fileName.substring(fileName.lastIndexOf("."));  
  11.     File targetFile = new File(path, filePath);  
  12.     if (!targetFile.exists()) {  
  13.         targetFile.mkdirs();  
  14.     }  
  15.     try {  
  16.         file.transferTo(targetFile);  
  17.         dataMap.put("filePath", filePath);  
  18.         dataMap.put("fileName", fileName);  
  19.         logger.info("文件上传成功");  
  20.     } catch (Exception e) {  
  21.             logger.error(e.getMessage());  
  22.     }  
  23.     ObjectMapper mapper = new ObjectMapper();  
  24.     String data =mapper.writeValueAsString(dataMap);  
  25.     response.setContentType("text/html;charset=UTF-8");  
  26.     response.getWriter().print(data);  
  27. }  

 

   下载方法

 

[java] view plain copy
 
  1. @RequestMapping("/downLoadFile")  
  2.     public void downLoadFile(HttpServletRequest req,HttpServletResponse resp,FileDTO fileDTO) throws IOException{  
  3.         logger.info("/file/downLoadFile");  
  4.         PrintWriter pw = null;  
  5.         resp.setContentType("text/html,charset=utf-8");  
  6.         resp.setCharacterEncoding("UTF-8");  
  7.         try {  
  8.             String path = req.getSession().getServletContext().getRealPath("/files")+ File.separator +fileDTO.getFilePath();  
  9.             File dir = new File(path);  
  10.             if (!dir.exists()) {  
  11.                 pw=resp.getWriter();  
  12.                 pw.print("<script>alert('抱歉,文件不存在');location.href='javascript:history.go(-1)';</script>);");  
  13.                 return;  
  14.             }  
  15.             FileInputStream in = new FileInputStream(path);  
  16.             OutputStream fos = resp.getOutputStream();  
  17.             resp.reset();  
  18.             resp.setContentType("application/x-download");  
  19.             resp.setHeader("Content-disposition", "attachment;filename="+getFileName(req,fileDTO.getFileName()));  
  20.             byte[] b = new byte[2048];  
  21.             int read;  
  22.             while ((read = in.read(b)) != -1) {  
  23.                 fos.write(b,0,read);  
  24.             }  
  25.             fos.flush();  
  26.             in.close();  
  27.             fos.close();  
  28.          } catch (FileNotFoundException e) {  
  29.             System.out.println(e.getMessage());  
  30.             pw=resp.getWriter();  
  31.             pw.print("<script>alert('抱歉,文件下载失败');location.href='javascript:history.go(-1)';</script>);");  
  32.          }  
  33.     }  
  34.     public String getFileName(HttpServletRequest req,String channelFileName) throws UnsupportedEncodingException{  
  35.         String fileName="";  
  36.         String userAgent = req.getHeader("User-Agent");   
  37.          //针对IE或者以IE为内核的浏览器,加上win10自带的Edge浏览器  
  38.          if (userAgent.contains("MSIE")||userAgent.contains("Trident")||userAgent.contains("Edge")) {  
  39.          fileName = java.net.URLEncoder.encode(channelFileName, "UTF-8");  
  40.         } else {  
  41.          //非IE浏览器的处理：  
  42.          fileName = new String(channelFileName.getBytes("UTF-8"),"ISO-8859-1");  
  43.         }  
  44.          return fileName;  
  45.     }  
[java] view plain copy
 
  1. package com.cn.entity;  
  2.   
  3. import java.io.Serializable;  
  4.   
  5. public class FileDTO implements Serializable{  
  6.   
  7.     /** 
  8.      *  
  9.      */  
  10.     private static final long serialVersionUID = -2487063172455865142L;  
  11.   
  12.     private int id;  
  13.     private String fileName;  
  14.     private String filePath;  
  15.     public int getId() {  
  16.         return id;  
  17.     }  
  18.     public void setId(int id) {  
  19.         this.id = id;  
  20.     }  
  21.     public String getFileName() {  
  22.         return fileName;  
  23.     }  
  24.     public void setFileName(String fileName) {  
  25.         this.fileName = fileName;  
  26.     }  
  27.     public String getFilePath() {  
  28.         return filePath;  
  29.     }  
  30.     public void setFilePath(String filePath) {  
  31.         this.filePath = filePath;  
  32.     }  
  33.       
  34. }  
posted @ 2017-10-13 10:29  旋羽  阅读(5182)  评论(0)  编辑  收藏  举报