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>

 

posted @ 2015-04-26 13:31  飞腾现舟、博  阅读(3403)  评论(0编辑  收藏  举报