您的位置：首页 > 编程技术 > js  >  jQuery文件上传插件Uploadify使用指南

jQuery文件上传插件Uploadify使用指南

 更新时间：2014年6月7日 11:51  点击：1207

对于HTML5版本会比较好的支持手机浏览器，避免苹果手机Safari浏览器不支持
Flash，主要特性：支持多文件上传、HTML5版本可拖拽上传、实时上传进度条显示、强大的参数
定制功能，如文件大小、文件类型、按钮图片定义、上传文件脚本等。

Flash版本使用方法：
1.加载JS和CSS

复制代码 代码如下:
 
<script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">

2.编写HTML内容

复制代码 代码如下:

<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>


3.函数调用

复制代码 代码如下:

<script type="text/javascript">
        $(document).ready(function()
        {
            $("#file_upload").uploadify({
                'uploader': 'uploadify.swf',
                'script': 'UploadHandler.php',               
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'auto': true,
                'multi': true
            });
        }); 
</script>

4.更多参数配置详解

uploader ： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出
打开文件对话框，默认值：uploadify.swf。
script ：   后台处理程序的相对路径 。默认值：uploadify.php
checkScript ：用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径
fileDataName ：设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata
method ： 提交方式Post 或Get 默认为Post
scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain 
folder ：  上传文件存放的目录 。
queueID ： 文件队列的ID，该ID与存放文件队列的div的ID一致。
queueSizeLimit ： 当允许多文件生成时，设置选择文件的个数，默认值：999 。
multi ： 设置为true时可以上传多个文件。
auto ： 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。
fileDesc ： 这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设
置fileDesc为“请选择rar doc pdf文件”
fileExt ： 设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。
sizeLimit ： 上传文件的大小限制 。
simUploadLimit ： 允许同时上传的个数 默认值：1 。
buttonText ： 浏览按钮的文本，默认值：BROWSE 。
buttonImg ： 浏览按钮的图片的路径 。
hideButton ： 设置为true则隐藏浏览按钮的图片 。
rollover ： 值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。
width ： 设置浏览按钮的宽度 ，默认值：110。
height ： 设置浏览按钮的高度 ，默认值：30。
wmode ： 设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页
面的最高层。 默认值：opaque 。
cancelImg ：选择文件到文件队列中后的每一个文件上的关闭按钮图标

上面介绍的key值的value都为字符串或是布尔类型，比较简单，接下来要介绍的key值的value为一个函数，可以在选择文件、出错或其他一些操作的时候返回一些信息给用户。

onInit : 做一些初始化的工作
onSelect ：选择文件时触发，该函数有三个参数
event:事件对象。
queueID：文件的唯一标识，由6为随机字符组成。
fileObj：选择的文件对象，有name、size、creationDate、modificationDate、type 5个属性。
代码如下：

复制代码 代码如下:
 
<script type="text/javascript">
$(document).ready(function()
{
    $("#uploadify").uploadify({
        'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
        'script': 'UploadHandler.ashx',
        'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
        'folder': 'UploadFile',
        'queueID': 'fileQueue',
        'auto': false,
        'multi': true,
        'onInit':function(){alert("1");},
        'onSelect': function(e, queueId, fileObj)
        {
            alert("唯一标识:" + queueId + "/r/n" +
                  "文件名：" + fileObj.name + "/r/n" +
                  "文件大小：" + fileObj.size + "/r/n" +
                  "创建时间：" + fileObj.creationDate + "/r/n" +
                  "最后修改时间：" + fileObj.modificationDate + "/r/n" +
                  "文件类型：" + fileObj.type
            );

        }
    });
});
</script>

　　
onSelectOnce ：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象
有以下几个属性：
fileCount：选择文件的总数。
filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。
filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。
allBytesTotal：所有选择的文件的总大小。
onCancel： 当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、
data四个参数，前三个参数同onSelect 中的三个参数，data对象有两个属性fileCount和allBytesTotal。
fileCount：取消一个文件后，文件队列中剩余文件的个数。
allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。

onClearQueue ：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。
onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个
参数event和queueSizeLimit。
onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参
数同上，errorObj对象有type和info两个属性。
type：错误的类型，有三种‘HTTP', ‘IO', or ‘Security'
info：错误的描述
onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。
该函数有event、queueId、fileObj三个参数，参数的解释同上。
onProgress ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队
 列，在onOpen之后触发。该函数有event、queueId、fileObj、data四个参数，前三个参数的解释同上。
data对象有四个属性percentage、bytesLoaded、allBytesLoaded、speed：
percentage：当前完成的百分比
bytesLoaded：当前上传的大小
allBytesLoaded：文件队列中已经上传完的大小
speed：上传速率 kb/s
onComplete：文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数
同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speed
fileCount：剩余没有上传完成的文件的个数。
speed：文件上传的平均速率 kb/s
注：fileObj对象和上面讲到的有些不太一样，onComplete 的fileObj对象有个filePath属性可以取出上传文件的路径。
onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参数，data有四个属性，
分别为：
filesUploaded ：上传的所有文件个数。
errors ：出现错误的个数。
allBytesLoaded ：所有上传文件的总大小。
speed ：平均上传速率 kb/s

[!--infotagslink--]

相关文章

  • Php文件上传类class.upload.php用法示例

    本文章来人大家介绍一个php文件上传类的使用方法，期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类， 它可以帮...2016-11-25

  • PHP文件上传一些小收获

    又码了一个周末的代码，这次在做一些关于文件上传的东西。（PHP UPLOAD）小有收获项目是一个BT种子列表，用户有权限上传自己的种子，然后配合BT TRACK服务器把种子的信息写出来...2016-11-25

  • jQuery实现简单的文件上传进度条效果

    本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下： 运行效果截图如下：具体代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24

  • php文件上传你必须知道的几点

    本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项，下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21

  • 借助FileReader实现将文件编码为Base64后通过AJAX上传

    这篇文章主要介绍了借助FileReader实现将文件编码为Base64后通过AJAX上传的方法,包括后端对文件数据解码并保存的PHP代码,需要的朋友可以参考下...2015-12-25

  • js实现上传文件添加和删除文件选择框

    这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-10-25

  • jQuery+ajax简单实现文件上传的方法

    这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12

  • 适用于初学者的简易PHP文件上传类

    本文实例讲述了PHP多文件上传类，分享给大家供大家参考。具体如下：<&#63;phpclass Test_Upload{ protected $_uploaded = array(); protected $_destination; protected $_max = 1024000; protected $_messages =...2015-10-30

  • js 实现文件上传样式详情

    这篇文章主要介绍了js 实现文件上传样式，下面文章举例说明js 是如何实现文件上传样式的，附有代码详细解说,需要的朋友可以参考一下，希望对你有所帮助...2021-10-21

  • PHP利用APC模块实现大文件上传进度条的方法

    php 大文件带进度的上传，一直是一个令php程序员很苦恼的问题。查询baidu 、Google ，大体做带进度的上传方式为：flash+php，socket，apc+php等，下面我介绍了apc +php+ajax制作的带进度的上传，并贴出源码，希望对大家有用。 Altern...2015-10-30

  • C#文件上传的简单实现

    这篇文章主要为大家详细介绍了C#文件上传的简单实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • TypeScript前端上传文件到MinIO示例详解

    这篇文章主要为大家介绍了TypeScript前端上传文件到MinIO示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪...2022-10-12

  • php需登录的文件上传管理系统

    本文给大家介绍一个不错的需要登录的php 文件上传管理系统，功能简单有需要了解的同学可参考。 代码如下<&#63;php$admin_pw="admin";//管理密码$uploaddir="upload";//上传目录session_start();if($_GET['action']=="g...2015-10-30

  • asp.net html控件的File控件实现多文件上传实例分享

    asp.net中html控件的File控件实现多文件上传简单实例，开发工具vs2010使用c#语言,感兴趣的朋友可以了解下，必定是多文件上传值得学习，或许本文所提供的知识点对你有所帮助...2021-09-22

  • JQuery异步提交表单与文件上传功能示例

    这篇文章主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下...2017-01-16

  • PHP文件上传主要代码讲解

    复制代码 代码如下:<?php if($_FILES['myfile']['name'] != '') { if($_FILES['myfile']['error'] > 0) { echo "错误状态：" . $_FILES['myfile']['error']; } else { move_uploaded_f...2013-10-04

  • 使用jQuery.form.js/springmvc框架实现文件上传功能

    这篇文章主要介绍了使用jQuery.form.jsspringmvc框架实现文件上传功能，非常具有参考借鉴价值，感兴趣的朋友一起学习吧...2016-05-14

  • jquery插件uploadify实现带进度条的文件批量上传

    这篇文章主要介绍了jquery插件uploadify实现带进度条的文件批量上传，感兴趣的小伙伴们可以参考一下...2015-12-14

  • C#简单实现文件上传功能

    这篇文章主要介绍了C#简单实现文件上传功能，利用MVC+EF+LigerUI 实现的upload上传功能，感兴趣的小伙伴们可以参考一下...2020-06-25

  • CKEditor配置实现文件上传功能

    CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。而CKFinder是...2016-09-20