springmvc 使用uploadify進行文件上傳


1、首先在uploadify官網下載相關的文件,目前有兩種類型的,一種是flash(免費),另一種是html5(要收費)

然后部署到項目里

這里需要

uploadify.js

uploadify.min.js

uploadify.css

uploadify-cancel.png

uploadify.swf

當然別忘了添加文件上傳時jar包

commons-fileupload.jar和commons-io.jar

2、然后進行初始化

<script type="text/javascript" src="<%=request.getContextPath() %>/js/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/uploadify/jquery.uploadify.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/uploadify/swfobject.js"></script>
<link href="<%=request.getContextPath() %>/js/uploadify/uploadify.css">
<script type="text/javascript">
    $(function(){
        $("#file_upload").uploadify({//上傳文件
             'method'   : 'post',
             'debug':'true',//開發者模式
             'uploader'       : 'upload/', //文件上傳的請求
             
             'swf':'uploadify.swf',//動態控件
             
             'cancelImg'      : 'files/images/css/uploadify-cancel.png',    //取消圖片           
             'queueID'        : 'queue',//與下面的id對應    文件上傳隊列顯示的地方
             'fileDesc'    : 'rar文件或zip文件',      
              'fileExt' : '*.rar;*.zip;*.jpg;*.png;*.exe;*.gif', //控制可上傳文件的擴展名,啟用本項時需同時聲明fileDesc  
                'auto'           : false,  //是否自動上傳
             'multi'          :    false,  //是否多文件上傳
             'simUploadLimit' : 2,
             'progressData ': 'percentage',//顯示上傳進度方式
             scriptData:{'name':'value'} ,
             'buttonText'     : '附件xx',//文件選擇按鈕名稱
             
             
         });
    });

下面是上傳調用,特別是uploadify的上傳和取消的函數,在uploadify的不同版本其函數的調用方式也稍有差距

<div id="queue"></div>
                    <input id="file_upload" name="file_upload" type="file" multiple="true">
                    <p ><a href="javascript:$('#file_upload').uploadify('upload', '*')">上傳文件</a> 
| <a href="javascript:$('#file_upload').uploadify('stop')">停止上傳!</a> </p>

 

@RequestMapping(value="/upload",method=RequestMethod.POST)     
    public void uploadify(@RequestParam("Filedata")MultipartFile multiFile,HttpServletRequest request, HttpServletResponse response) throws IOException, FileUploadException{
        System.out.println("上傳文件");
        System.out.println("name:"+multiFile.getOriginalFilename());
        System.out.println("inputstream"+multiFile.getInputStream());

        ServletContext sc = request.getSession().getServletContext();
        String dir = sc.getRealPath("/upload");//附件存放服務器的路徑
        System.out.println(dir);
        File file = new File(dir);
        if(!file.exists()){
            file.mkdirs();
        }
        String filename = multiFile.getOriginalFilename();
        String realname = filename.substring(0, filename.indexOf("."));
        //防止文件被覆蓋,以納秒生成文件
        Long _l = System.nanoTime();
        String _extfilename = filename.substring(filename.indexOf("."));
        filename = _l+_extfilename;
        String uploadPath = request.getContextPath()+""+dir+"/"+filename;
        String responseStr = "";
        try {
            FileUtils.writeByteArrayToFile(new File(dir, filename), multiFile.getBytes());
            responseStr = "上傳成功!";
            
        } catch (Exception e) {
            e.printStackTrace();
            responseStr = "fail";
            System.out.println("上傳失敗!");
        }
}

注意還得在springmvc配置文件弄個resolver,否則文件上傳是會報請求找不到流的異常

  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">        
      <property name="defaultEncoding" value="utf-8"></property> 
      <property name="maxUploadSize" value="104857600"/>
    </bean> 
  
     <!-- 該異常是SpringMVC在檢查上傳的文件信息時拋出來的,而且此時還沒有進入到Controller方法中 -->
    <bean id="exceptionResolver"
         class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
         <property name="exceptionMappings">
             <props>
                <!-- 遇到MaxUploadSizeExceededException異常時,自動跳轉到XXX頁面 -->
                 <prop
                     key="org.springframework.web.multipart.MaxUploadSizeExceededException">exception/fileuploadexception</prop>
             </props>
         </property>
     </bean>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM