Uploadify异步上传插件方法

最新推荐文章于 2022-10-17 12:04:39 发布

清风明月_vip

最新推荐文章于 2022-10-17 12:04:39 发布

阅读量714

点赞数

分类专栏：前台插件文章标签： upload 异步上传进度条

本文链接：https://blog.csdn.net/huanglitai/article/details/79016853

版权

前台插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

 
 Uploadify 
 是一款基于JQuery的优秀的文件/图片上传的插件 

 
 Uploadify/uploadifive主要特点有： 
   

 
 1. 多文件上传  

 
 2. 个性化设置  

 
 3. 上传进度条显示  

  中文api 

  要求 

      
 在部署一个Uploadify实例前，请确保满足最低要求 

 
 1.jQuery 1.4.x 或更高版本

 
 2.Flash（动画） +--+9.0.24 或更高版本 

 
 融入项目 

 
 2.引用jquery库 

<script type="text/javascript" src="/uploadify/jquery.min.js"></script>

 
 3.引用uploadify脚本 

<script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>

 
 4.引用uploadify样式表 

<link rel="stylesheet" type="text/css" href="uploadify.css" />

 
 5. 声明一个普通的html文件上传控件，并指定id 

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

 
 6. 将声明的普通上传控件与Uploadify插件绑定，并初始化 

$("#img").uploadify({
            //插件自带  不可忽略的参数
          'swf': '<%=request.getContextPath()%>/js/uploadify/uploadify.swf',
        //前台请求后台的url 不可忽略的参数
        'uploader': '<%=request.getContextPath()%>/upload!upload.action',
            //给div的进度条加背景 不可忽略
                'queueID': 'fileQueue',
                //上传文件文件名
                'fileObjName' : 'img',
                //给上传按钮设置文字
                'buttonText': '上传文件',
                //设置文件是否自动上传:需要自动上传需要改成true
//false的话，需要手动调用方法点击开始上传
            'auto': false,
            //可以同时选择多个文件 默认为true  不可忽略
            'multi': true,
            //上传后队列是否消失
                'removeCompleted': true,
                //队列消失时间
                'removeTimeout' : 1,
            //上传文件的个数，项目中一共可以上传文件的个数
            'uploadLimit':  -1,
            'fileTypeExts': '*.jpg;*.png',
//成功回调函数 file：文件对象。data后台输出数据
            'onUploadSuccess':function(file,data,response){
            alert(data+file.name)
            $("#testimg").attr("src","/upload/"+data)
            }
            });
      
方法：
上传文件
$('#img').uploadify('upload')
取消上传
$('#img').uploadify('cancel')

  代码示例 

  jsp： 
 
 

<%@ pagelanguage="java"contentType="text/html; charset=UTF-8"

  pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Inserttitle here</title>

 

<!-- 引入jquery -->

<script type="text/javascript"

  src="<%=request.getContextPath()%>/js/jquery/jquery-1.11.3.min.js"></script>

<!-- 导入上传插件 -->

<script type="text/javascript"

  src="<%=request.getContextPath()%>/js/uploadify/jquery.uploadify.min.js"></script>

<link rel="stylesheet"type="text/css"

  href="<%=request.getContextPath()%>/js/uploadify/uploadify.css"/>

<!-- 引入外地js     js jsp 分离 -->

<script type="text/javascript"

  src="<%=request.getContextPath()%>/js/stu/stu.js"></script>

 

</head>

<body>

  <h1>欢迎来到明瑞教育</h1>
 这是上传按钮

  <inputid="uploadify"type="file">

这是easyui加载list数据

  <divid="stu_list_div"></div>

</body>

</html>

js

//初始化上传插件

functioninitUpload() {

  $("#uploadify").uploadify({

     //插件自带 不可忽略的参数

     'swf' :'../js/uploadify/uploadify.swf',

     //前台请求后台的url不可忽略的参数

     'uploader' :'../stu/uploadExcel.do',

     //给div的进度条加背景不可忽略

     'queueID' :'fileQueue',

     //上传文件文件名

     'fileObjName' :'excel',

     //给上传按钮设置文字

     'buttonText' :'导入excel',

     //设置文件是否自动上传

     'auto' :true,

     //可以同时选择多个文件默认为true 不可忽略

     'multi' :true,

     //上传后队列是否消失

     'removeCompleted' :true,

     //队列消失时间

     'removeTimeout' : 1,

     //上传文件的个数，项目中一共可以上传文件的个数

     'uploadLimit' : -1,

     'fileTypeExts' :'*.xls;*.xlsx',

     //成功回调函数 file：文件对象。data后台输出数据

     'onUploadSuccess' :function(file,data, response) {

 

       //$('#stu_list_div').datagrid("reload")

     }

  });

}

  java 
 
 

//保存文件

  @ResponseBody

  @RequestMapping("uploadExcel")

  publicvoiduploadExcel(

       @RequestParam(value="img")MultipartFileimg

       ){

     try {

       //直接将图片保存到d盘目录下

       img.transferTo(new File("d:\\img\\"+img.getOriginalFilename()));

     } catch(IllegalStateExceptione) {

       // TODOAuto-generated catch block

       e.printStackTrace();

     } catch(IOExceptione) {

       // TODOAuto-generated catch block

       e.printStackTrace();

     }

    

  }