`

jQuery上传插件Uploadify 3.2使用

jQuery上传插件Uploadify 3.2 
阅读更多

 

Uploadify下载地址：http://www.uploadify.com/download/ 这里下载最新版的3.2的。
下载下来解压后估计里面很多文件，其实有用的也就一个jquery.uploadify.js和uploadify.swf这两个文件。当然啦，jQuery库那是必须的。
在你使用的项目中，把jquery.uploadify.js引入以后，用法和大多数JQ插件一样。同时也要记得引入swfobject.js这个插件，版本2.2以上的。使用方法例如：

1
2
3
4
5
6
7
8
$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

file_upload_1其实也就是一个容器ID，比如<div id="file_upload_1"></div>，上面的只是简单的事例，下面我就把我在项目中做的发出来，每个都有解释：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
$(document).ready(function() {
    $("#file_upload").uploadify({
        //开启调试
        'debug' : false,
        //是否自动上传
        'auto':false,
        //超时时间
        'successTimeout':99999,
        //附带值
        'formData':{
            'userid':'用户id',
            'username':'用户名',
            'rnd':'加密密文'
        },
        //flash
        'swf': "uploadify.swf",
        //不执行默认的onSelect事件
        'overrideEvents' : ['onDialogClose'],
        //文件选择后的容器ID
        'queueID':'uploadfileQueue',
        //服务器端脚本使用的文件对象的名称 $_FILES个['upload']
        'fileObjName':'upload',
        //上传处理程序
        'uploader':'imageUpload.php',
        //浏览按钮的背景图片路径
        'buttonImage':'upbutton.gif',
        //浏览按钮的宽度
        'width':'100',
        //浏览按钮的高度
        'height':'32',
        //expressInstall.swf文件的路径。
        'expressInstall':'expressInstall.swf',
        //在浏览窗口底部的文件类型下拉菜单中显示的文本
        'fileTypeDesc':'支持的格式：',
        //允许上传的文件后缀
        'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png',
        //上传文件的大小限制
        'fileSizeLimit':'3MB',
        //上传数量
        'queueSizeLimit' : 25,
        //每次更新上载的文件的进展
        'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
             //有时候上传进度什么想自己个性化控制，可以利用这个方法
             //使用方法见官方说明
        },
        //选择上传文件后调用
        'onSelect' : function(file) {
                
        },
        //返回一个错误，选择文件的时候触发
        '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;
            }
        },
        //检测FLASH失败调用
        'onFallback':function(){
            alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");
        },
        //上传到服务器，服务器返回相应信息到data里
        'onUploadSuccess':function(file, data, response){
            alert(data);
        }
    });
});

大体上常用的我想也就这些，至于后端处理上传部分，我这里就不多讲了，

************************************************************

参数描述：

 

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  3. <html>  
  4.     <head>  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.         <title>文件上传演示</title>  
  7.         <link href="css/uploadify.css" rel="stylesheet" type="text/css" />  
  8.         <script type="text/javascript" src="js/jquery1.6.1.js"></script>  
  9.         <script language="javascript" src="js/swfobject.js"></script>  
  10.         <script language="javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>  
  11.   
  12.         <script type="text/javascript">   
  13.             function showResult(){//删除显示的上传成功结果     
  14.                 $("#result").html("");     
  15.             }     
  16.               
  17.             $(document).ready(function() {  
  18.                 $('#fileInput').uploadify({     
  19.                     'uploader': 'js/swf/uploadify.swf',  
  20.                     'script': 'uploadifyAction.action',   //指定服务端处理类的入口  
  21.                     'folder': 'uploadFile',     
  22.                     'fileDataName': 'fileInput', //和input的name属性值保持一致就好，Struts2就能处理了      
  23.                     'queueID': 'fileQueue',    
  24.                     'auto': false,//是否选取文件后自动上传     
  25.                     'multi': true,//是否支持多文件上传  
  26.                     'simUploadLimit' : 5,//每次最大上传文件数    
  27.                     //'buttonImg': 'images/btn.gif',//按钮上的图片   
  28.                     'buttonText': 'File',//按钮上的文字    
  29.                     'onComplete': function (event, queueID, fileObj, response, data) {     
  30.                         $("#result").html(response);//显示上传成功结果     
  31.                         //setInterval("showResult()",2000);//两秒后删除显示的上传成功结果     
  32.                      }      
  33.                 });     
  34.             });    
  35.         </script>  
  36.     </head>  
  37.     <body>  
  38.         <input type="file" name="fileInput" id="fileInput" />  
  39.         &nbsp;&nbsp;&nbsp;&nbsp;  
  40.         <a href="javascript:$('#fileInput').uploadifyUpload();">开始上传</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
  41.         <div id="result"></div>  
  42.         <a href="javascript:$('#fileInput').uploadifyClearQueue();"  >取消上传队列</a>  
  43.          <div id="fileQueue"></div>    
  44.         <!--显示结果-->  
  45.     </body>  
  46. </html>  
属性解说： 
uploader: swf文件的存放位置，默认为uploadify.swf。这个属性一定要配置好，如果不配置好，插件就会去寻找与jsp同级的一个叫做uploadify.swf的文件，如果找不到，上传按钮处会显示一片空白。 
script: 'uploadifyAction.action',指定服务端处理类的入口 
fileDataName：网页中的文件选择标签 
auto：是否选取文件之后自动上传 
buttonImg：按钮图片（不推荐使用），这是在页面加载完成之后，flash再从网页中取得图片，将图片填充到swf里面，所以按钮都会在页面刷新好以后几秒钟才加载完成。
buttonText：（推荐使用），选择文件按钮就是一个黑色按钮，如果对样式没什么要求的话就用这个属性，但是只能使用英文，用中文的话不能正常显示。 

***********************官方说明**************************

官方插件
http://blueimp.github.com/jQuery-File-Upload/

分享到：
| MYSQL使用.frm恢复数据表结构的实现方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery上传插件Uploadify3.2中文参考手册

    今天我要给大家介绍额就是一款jQuery的无刷新上传插件 -UploadifyjQuery 上传插件Uploadify3.2最新版本中文实用手册，对于该插件的属性方法进行详细讲解官方地址：http://w 资源太大，传百度网盘了，链接在附件中，...

    jquery上传插件Uploadify3.2中文详细参考手册

    Uploadify是一款基于jQuery的文件上传插件，特别适用于实现多文件上传功能。Uploadify3.2中文详细参考手册提供了全面的配置选项和事件处理，使得开发者能够灵活地定制上传过程。 配置选项是Uploadify的核心部分，...

    jquery上传插件Uploadify3.2中文详细参考手册.pdf

    jQuery Uploadify是一款强大的、无刷新的文件上传插件，它使得用户在网页上进行文件上传时无需等待页面刷新，极大地提升了用户体验。Uploadify 3.2版本是其发展过程中的一个重要里程碑，提供了许多改进和新特性。 *...

    jQuery插件uploadify3.2.zip

    《jQuery插件uploadify3.2深度解析》 在当今的Web开发中，用户交互体验是至关重要的一环，其中文件上传功能是常见的需求之一。jQuery作为JavaScript库的翘楚，其丰富的插件生态为开发者提供了便利。Uploadify，便是...

    Uploadify3.2Demo

    Uploadify3.2Demo是一个基于jQuery的文件上传插件，专为实现高效、便捷的多文件上传功能而设计。在Web开发中，尤其是在用户需要上传大量或者多个文件时，这样的工具变得至关重要。Uploadify3.2是这个插件的一个特定...

    uploadify 3.2

    - `jquery.uploadify.js` 和 `jquery.uploadify.min.js`：这是jQuery插件的主要脚本文件，包含Uploadify的逻辑代码，`min.js`是压缩版，用于生产环境以减少加载时间。 - `index.php`：示例页面，展示了如何在实际...

    jquery.uploadify3.2在struts2中使用的完整工程

    jQuery Uploadify 3.2是一个流行的前端文件上传插件，它允许用户通过Ajax技术实现异步、多文件上传功能，大大提升了用户界面的交互性和用户体验。这个完整的工程是将Uploadify与Struts2框架结合，以Java后端作为处理...

    【Asp.net上传】jQuery.Uploadify 3.2版本的一个实例

    在本文中，我们将深入探讨如何在ASP.NET环境中利用jQuery Uploadify 3.2插件实现文件上传功能。jQuery Uploadify是一款流行的JavaScript库，它提供了一种直观、用户友好的方式来处理多文件上传，适用于各种Web应用...

    uploadify3.2的使用

    次压缩包除官方所提供的uploadify3.2包含文件外，还有JQUERY的基础库（jquery-1.8.0.min.js），以及（swfobject.js）组件，这两个文件在使用uploadify3.2组件时也是必须引入的，为了方便，所以将其都压缩到一起，供...

    uploadify3.2Demo.rar

    《uploadify3.2Demo.rar》为开发者提供了完整的Uploadify 3.2实例，通过学习和实践，你可以掌握这个强大文件上传插件的使用，提升网站的用户体验。无论是在企业级应用还是个人项目中，Uploadify都能成为你处理文件...

    springside4使用Jquery uploadify3.2上传文件

    《使用Jquery Uploadify3.2在Springside4中实现文件上传详解》 在现代Web应用中，文件上传功能是不可或缺的一部分。本篇文章将详细讲解如何在Springside4框架下利用Jquery的Uploadify插件实现文件上传功能。...

    uploadify3.2实现文件上传

    Uploadify是一款广受欢迎的jQuery插件，主要用于实现网页上的文件上传功能。它的版本3.2在当时具有较高的稳定性和良好的用户交互体验，因此备受开发者喜爱。在这个教程中，我们将深入探讨Uploadify 3.2的核心特性、...

    uploadify 3.2 ASP.NET例子

    uploadify 3.2 是一个流行的前端文件上传插件，尤其在ASP.NET开发环境中被广泛使用。这个插件允许用户通过交互式的界面批量上传文件，提供了丰富的自定义选项和事件处理，大大提升了用户体验。在ASP.NET中集成...

    uploadify3.2_Java_Servlet_多文件.zip

    这个压缩包"uploadify3.2_Java_Servlet_多文件.zip"包含了一个使用Uploadify与Java Servlet结合的示例，用于处理多文件上传的场景。在本文中，我们将深入探讨Uploadify、Java Servlet以及如何将它们整合在一起实现...

    struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

    在"struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序"这个项目中，开发者使用了Uploadify 3.2版本，这是一个支持异步上传和批量上传的插件，能够很好地与Struts2框架整合。以下是实现这一功能的关键...

    jquery.uploadify.js 3.2.1

    uploadfiy这个插件是基于js里面的jquery库写的。结合了ajax和flash，实现了这个多线程上传的功能。

    jQuery的Uploadify插件上传Demo

    Uploadify是jQuery的一款很棒的多文件上传插件，我这个Demo是基于Uploadify v3.2(Flash-Based Multiple File Uploader )官方Demo写的，里面增加了几个小功能，用来演示，抛砖引玉。Demo里面有很详细的中文注释，另外...

    Uploadify3.1参数详解

    Uploadify是一款基于jQuery的文件上传插件，提供了丰富的自定义选项以及良好的用户体验。其特点包括支持上传进度显示、多文件上传等功能。本篇文章将详细介绍Uploadify3.1版本中与2.1.4版本相比新增或改进的属性、...

Magicbox
Global site tag (gtag.js) - Google Analytics