`
汾水边的意气少年
  • 浏览: 7958 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Springmvc+uploadify实现文件上传

 
阅读更多

          Springmvc+uploadify实现文件上传

 

   网上看了很多关于文件上传的帖子,众口不一,感觉有点乱,最近正好公司的项目里用到JQueryuploadify控件做文件上传,所以整理下头绪,搞篇文档出来,供亲们分享。

     

   Uploadify控件的主要优势是可以实现批量文件上传,并且提供了onSelect(选中文件)、onUploadSuccess(上传成功回调函数)等多个事件监听函数,可以操控上传的整个流程。

 

   对uploadify有个简单的了解后,废话不多说,开始吧...

 

(由于这次项目中用到的是ssm框架,所以就以springmvc的后台处理为例)

 

 

一、在工程中导入uploadify

 

1、首先,下载uploadify包文件

 

Uploadify官网 :http://www.uploadify.com/

 

2、解压包文件,得到如下结构:

 

 
 

background.jpg   是上传框的背景图片

jquery.uploadify.min.js   迷你版的uploadify js文件,主要功能就靠它了

jquery-1.9.1.js   都懂得,版本没啥要求

uploadify.css    上传组件的美化文件

uploadify.swf    上传时的动态效果,进度条等

Uploadify-cancel.png   取消上传按钮图片

 

 

 

3、uplodify文件夹放到webapp



 
 

 

4、导入必须的jar

 

commons-fileupload-1.3.1.jar  

commons-io-2.2.jar

 

使用mavenpom.xml中添加如下依赖即可:

 

<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
</dependency>

 

 

 

5、springmvc.xml文件中加入multipart 的解析器

 

 

<bean

id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

<property name="maxUploadSize" value="1024000"></property>

<property name="defaultEncoding" value="utf-8"/><!--属性:编码-->

</bean>

 

 

注:这个必须配置,一会在controller里抓取上传文件时要用。否则会报错。

 

 

 

 

二、在需要做上传的页面中配置

 

6、在页头导入

 

 

 

7、在页面中需要上传附件的位置插入

 

<div id="uploadfileQueue"></div> //存放选择文件的 图片按钮的 Div

<input type="file" id="file_upload">

<input type="button" value="上传"
 onclick="javascript:$('#file_upload').uplodify('upload','*')" >

<input type="button" value="取消上传"
 onclick="javascript:$('#file_upload').uplodify('cancel','*')" >

    (固定写法)

 

 

 

8js中设置

 

<script type="text/javascript">

$(document).ready(function() {

    $("#file_upload").uploadify({

        //是否自动上传 true or false
        'auto':false,

        //超时时间上传成功后,将等待服务器的响应时间。
        //在此时间后,若服务器未响应,则默认为成功(因为已经上传,等待服务器的响应) 单位:秒
        'successTimeout':99999,

        //附带值 JSON对象数据,将与每个文件一起发送至服务器端。
        //如果为动态值,请在onUploadStart()中使用settings()方法更改该JSON值
       'formData':{       //可以不写
    	   'user.username':'',
    	   'user.age':''
    	   },  
    	    'onUploadStart': function(file) { 
    	    	var name=$('#username').val();
    	    	var age=$('#age').val();
    	    	$("#file_upload").uploadify(
    	    	"settings", 
    	    	"formData", 
    	    	{'user.username':name,'user.age':age});
    	    	}, 
        //flash
        'swf': "${pageContext.request.contextPath}/uplodify/uploadify.swf",

         //文件选择后的容器div的id值 
        'queueID':'uploadfileQueue',

         //将要上传的文件对象的名称 必须与后台controller中抓取的文件名保持一致    
        'fileObjName':'pic',

        //上传地址
       'uploader':'${pageContext.request.contextPath}/upload/uploadFile',

        //浏览将要上传文件按钮的背景图片路径
        'buttonImage':'${pageContext.request.contextPath}/uplodify/background.jpg',

        //浏览按钮的宽度
        'width':'100',

        //浏览按钮的高度
        'height':'32',

        //在浏览窗口底部的文件类型下拉菜单中显示的文本
        'fileTypeDesc':'支持的格式:',

        //允许上传的文件后缀
        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png', //有哪些??

        /*上传文件的大小限制允许上传文件的最大 大小。 这个值可以是一个数字或字 符串。
          如果它是一个字符串,它接受一个单位(B, KB, MB, or GB)。
          默认单位为KB您可以将此值设置为0 ,没有限制, 
          单个文件不允许超过所设置的值 如果超过 onSelectError时间被触发*/
        'fileSizeLimit':'100KB',

        //允许上传的文件的最大数量。当达到或超过这个数字,onSelectError事件被触发。
        'queueSizeLimit' : 3,

        //选择上传文件后调用
        'onSelect' : function(file) {
              //alert("123");    
        },

        //返回一个错误,选择文件的时候触发
        'onSelectError':function(file, errorCode, errorMsg){
            switch(errorCode) {
                case -100:
                    alert("上传的文件数量已经超出系统限制的"
                     +$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!");
                    break;

                case -110:
                    alert("文件 ["+file.name+"] 大小超出系统限制的"
                     +$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!");
                    break;

                case -120:
                    alert("文件 ["+file.name+"] 大小异常!");
                    break;

                case -130:
                    alert("文件 ["+file.name+"] 类型不正确!");
                    break;
            }
        },

        //上传到服务器,服务器返回相应信息到data里
        'onUploadSuccess':function(file, data, response){
            alert("上传成功");
        },

      //当单个文件上传出错时触发
        'onUploadError': function (file, errorCode, errorMsg, errorString) { 
        	alert("上传失败");
        	} 
    });

});

</script>

 

 

 

9、controller中,实现上传

 

//接收上传文件

@RequestMapping(value="uploadFile",method=RequestMethod.POST,produces="text/html;charset=utf-8")

@ResponseBody

public String uploadFile(@RequestParam("pic")CommonsMultipartFile pic,HttpServletRequest req,HttpServletResponse response) throws IOException{

//设置文件保存的本地路径

String filePath = req.getSession().getServletContext().getRealPath("/uploadFiles/");

String fileName = pic.getOriginalFilename();

String fileType = fileName.split("[.]")[1];

//为了避免文件名重复,在文件名前加UUID

String uuid = UUID.randomUUID().toString().replace("-","");

String uuidFileName = uuid + fileName;

File f = new File(filePath+"/"+uuid+"."+fileType);

//将文件保存到服务器

FileUtil.upFile(pic.getInputStream(), uuidFileName, filePath);

return uuidFileName;

}

 

 

 

 

 

这个过程中要用到FileUtil工具类:

 

package com.baidu.util;

 

import java.io.BufferedInputStream;

import java.io.BufferedOutputStream;

import java.io.File;

import java.io.FileInputStream;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import java.io.OutputStream;

import java.util.List;

import java.util.zip.ZipEntry;

import java.util.zip.ZipOutputStream;

 

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

public class FileUtil {

/**

 * 单个文件上传

 * @param is

 * @param fileName

 * @param filePath

 */

public static void upFile(InputStream is,String fileName,String filePath){

FileOutputStream fos = null;

BufferedOutputStream bos = null;

BufferedInputStream bis = null;

File file = new File(filePath);

if(!file.exists()){

file.mkdirs();

}

File f = new File(filePath+"/"+fileName);

try {

bis = new BufferedInputStream(is);

fos = new FileOutputStream(f);

bos = new BufferedOutputStream(fos);

byte[] bt = new byte[4096];

int len;

while((len = bis.read(bt))>0){

bos.write(bt, 0, len);

}

} catch (Exception e) {

e.printStackTrace();

}finally {

try {

if(null != bos){

bos.close();

bos = null;}

if(null != fos){

fos.close();

fos= null;

}

if(null != is){

is.close();

is=null;

}

if (null != bis) {

bis.close();

bis = null;

}

} catch (Exception e) {

e.printStackTrace();

}

}

}

}

 

 

 

 

10、效果图



 
 

 



 
 

 

 

 

三、总结

 

1、多文件的上传其实是多次调用单文件上传的方法,我们看到的批量上传其实是分步执行的,上传一次调用一次单文件上传的方法,不要被假象迷惑。

2、上传成功后可以返回文件的信息,在onUploadSuccess函数中可以获取到,这样就可以在页面上设置一个隐藏域存放返回来的值,比如说文件的id,多文件的话可以在隐藏域中抓取数组。然后随表单提交,更新表数据,这样就能方便的把上传文件的信息添加到数据库表中。

 

 

 

希望对大家有所帮助。

 (转载请注明出处)

 

 

 

  • 大小: 6.8 KB
  • 大小: 14.8 KB
  • 大小: 12.7 KB
  • 大小: 5.5 KB
  • 大小: 22.3 KB
2
2
分享到:
评论
7 楼 汾水边的意气少年 2016-09-30  
q597634528 写道
为什么 我按照上面写的  点击上传没有反应了 

有没有报错
6 楼 q597634528 2016-09-10  
为什么 我按照上面写的  点击上传没有反应了 
5 楼 ausit 2015-12-12  
汾水边的意气少年 写道
ausit 写道
String fileType = fileName.split("[.]")[1]; 这句不是很合理,
请把loadify的那个包上传为附件,谢谢,我在官网下了一个报错一堆,可能是我找错了版本


亲,rar包已上传,里边都有。
那个路径处理是不太合理,按"."分割来取后缀名,如果前边名字里带"."就会有错,我们是约定前边命名图片不带点的,可以统一用下划线分割,当然可以根据实际情况选别的方式!


谢谢,之前我直接拿着你的代码跑的,后面发现问题是js文件夹名称不同,不过官网现在没有background图片
4 楼 汾水边的意气少年 2015-12-12  
ausit 写道
String fileType = fileName.split("[.]")[1]; 这句不是很合理,
请把loadify的那个包上传为附件,谢谢,我在官网下了一个报错一堆,可能是我找错了版本


亲,rar包已上传,里边都有。
那个路径处理是不太合理,按"."分割来取后缀名,如果前边名字里带"."就会有错,我们是约定前边命名图片不带点的,可以统一用下划线分割,当然可以根据实际情况选别的方式!
3 楼 ausit 2015-12-12  
String fileType = fileName.split("[.]")[1]; 这句不是很合理,
请把loadify的那个包上传为附件,谢谢,我在官网下了一个报错一堆,可能是我找错了版本
2 楼 masuweng 2015-12-09  
学习了.以后用的着.
1 楼 winter2046 2015-12-09  

相关推荐

    SpringMVC + jquery.uploadify实现上传文件功能

    本文将详细讲解如何结合jQuery的uploadify插件,在SpringMVC环境中实现文件上传功能。 首先,让我们了解文件上传的基本原理。在传统的HTML表单提交中,如果表单包含`enctype="multipart/form-data"`属性,那么...

    JQuery uploadify 实现批量上传例子

    而Uploadify则是JQuery的一个插件,它提供了一种优雅的方式来实现文件的上传功能,包括单个文件上传和批量上传。本篇文章将详细介绍如何使用JQuery uploadify实现批量上传功能,并探讨其核心原理和相关配置。 首先...

    spring mvc uploadify上传文件

    Spring MVC是Spring框架的一部分,专门用于构建Web应用程序,而uploadify是一款前端JavaScript插件,使得用户能够在浏览器端实现文件上传的便捷操作。 ### 1. Spring MVC 文件上传基础 Spring MVC提供了`@...

    SpringMVC搭建,实现数录入和uploadify附件上传下载

    总结来说,这个项目涵盖了SpringMVC的初始化配置、数据库操作、服务层设计、控制器编写、datagrid数据展示以及uploadify的文件上传下载功能。通过这个项目,你可以深入理解SpringMVC的工作原理,并掌握前端与后端...

    SpringMVC搭建,实现数据录入和uploadify附件上传下载

    - Uploadify是一款JavaScript和Flash混合的文件上传插件,它可以提供多文件上传、进度条显示等功能。 - 在SpringMVC中,你需要创建一个Controller方法接收上传的文件,使用`@RequestParam("file") MultipartFile ...

    uploadify在SpringMVC下的使用示例

    uploadify是一款优秀的JavaScript插件,它使得在网页上实现文件上传变得简单而高效。在SpringMVC这一强大的Java Web开发框架下,结合uploadify,我们可以构建出用户友好的、支持多文件上传的系统。本文将详细介绍...

    SpringMVC框架搭建,并实现附件上传下载

    - **集成uploadify**:uploadify是一个基于jQuery的文件上传插件,提供了分块上传、预览、进度条等功能。在HTML页面中引入uploadify的JavaScript和CSS文件。 - **后端处理上传**:创建一个Controller方法接收上传...

    用uploadify3.2.1批量上传图片,预览图片,单独删除图片

    Uploadify是一款基于JavaScript和Flash的文件上传插件,支持多文件选择、进度条显示、预览功能,并且可以自定义样式,使得文件上传更加用户友好。在3.2.1版本中,它提供了丰富的配置选项和事件处理,能够满足大部分...

    基于数据库的邮件系统

    这个系统特别提到了“附件上传使用uploadify”,Uploadify是一款JavaScript插件,用于在Web页面上实现文件上传功能,尤其适用于大文件或多个文件的上传,它提供了友好的用户界面和异步上传的能力。 【标签】"邮件...

    基于SpringBoot的通用管理平台源代码+数据库+详细文档

    以SpringBoot为核心框架,集ORM...文件上传:JQuery uploadify 树形结构:EasyUI Tree 日期插件:JQuery Date 弹窗框架:zDialog Cookie保存:JQuery Cookie 富文本编辑器:Baidu UEDitor 前端框架:Twitter Bootstrap

    java uploadfiy上传图片编辑删除图片

    一种是servlet形式,但是用起来session取值有缺点,另一种是springmvc的形式,以及几种其他的应用模板,里面没有spring的包,直接拿过来用就可以,主要是批量上传图片,以及删除图片,和编辑图片等页面,add.jsp 和...

    CMS轻量级系统

    天梯(tianti) Java 轻量级的 CMS 解决方案-天梯。天梯是一个用 Java 相关技术搭建的后台 CMS ... 文件上传 :jquery.uploadify 表单验证 :jquery.validator 展现树 :jquery.ztree html模版引擎 :template

    ssm框架酒吧系统完整导入可运行带sql

    js里导uploadify文件 配置D:\tomcat2\apache-tomcat8090\bin并启动 yq/util导UploadFile.java jsp页面在body中引入js文件 会员管理 负责人(韩苏雨) 会员管理模块 1、会员基本信息:主要是注册一些会员信息,...

Global site tag (gtag.js) - Google Analytics