jQuery uploadify3.2版本使用教程01

来源：互联网发布：复制别人的淘宝装修编辑：程序博客网时间：2024/05/22 08:26

1、简介

Uploadify是jQuery的一个上传插件，支持多文件上传，实现的效果非常不错，带进度显示，提供非常丰富的回调功能函数来对文件上传过程进行处理，兼容性依赖于jQuery，3.2版本兼容各大主流浏览器，如IE、FF、Chrome等。

官方地址：

http://www.uploadify.com/

http://www.uploadify.com/demos/

2、要求

使用jQuery Uploadify需要如下最低要求：

jQuery1.4.x版本以及以上。
FlashPlayer 9.0.24版本以及以上。
可解析PHP、ASP.Net一门服务器端语言。

3、实现

从官方下载Uploadify.zip包，它是免费的。
解压缩zip包到一个指定的文件夹。
解压缩后的文件夹中包含如下文件：

jquery.uploadify-3.x.min.js

uploadify.php

uploadify.swf

uploadify.css

uploadify-cancel.png

...

在项目的网页中引入jQuerylib包

<script type="text/javascript" src="js/jquery-easyui-1.3.2/jquery-1.8.0.min.js" charset="UTF-8"></script>

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

<pre name="code" class="html"><link rel="stylesheet" type="text/css" href="uploadify.css" />

在页面上添加一个file类型的input元素，如下：

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

初始化uploadify在上述id=file_upload的元素中：

$(function() {    $('#file_upload').uploadify({        'swf'      : 'uploadify.swf',        'uploader' : 'uploadify.php'        // Put your options here    });});

最后完整的页面如下：

<!DOCTYPE html><html><head>    <title>My Uploadify Implementation</title>    <link rel="stylesheet" type="text/css" href="uploadify.css">    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>    <script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>    <script type="text/javascript">    $(function() {        $('#file_upload').uploadify({            'swf'      : 'uploadify.swf',            'uploader' : 'uploadify.php'            // Your options here        });    });    </script></head><body><input type="file" name="file_upload" id="file_upload" /></body></html>

运行结果

4、属性详解

属性默认值说明autotrue设置为true，当选择文件后就可以直接上传，为false需要点击上传按钮才上传。buttonClassempty String按钮样式，默认为空字符串。buttonCursor‘hand’鼠标指针悬停在按钮上的样式。buttonImagenull;浏览按钮的图片路径。buttonText‘SELECT FILES’浏览按钮的文本。3checkExistingfalse 文件上传重复性检查程序，检查即将上传的文件在服务器端是否已经存在，存在返回1，不存在返回0。debugfalse 如果设置为true，则表示启用SWFUpload的调试模式。fileObjName'‘Filedata’文件上传对象的名称，如果命名为the_files,PHP程序可以用$_FILES['the_files']来处理上传的文件对象。fileSizeLimit0上传文件的大小限制，如果为整数型，则表示以KB为单位的大小，如果是字符串，则可以使用(B、KB、MB、GB)为单位，比如2MB，如果设置为0则表示无限制。fileTypeDescAll Files 这个属性值必须设置fileTypeExts属性后才有效，用来设置选择文件对话框中的提示文本，如果设置fileTypeDesc为：请选择rar doc pdf文件等。fileTypeExts*.*设置可以选择的文件的类型，格式如：*.doc;*.pdf;*.rar。formData JSON格式上传每个文件的同时提交到服务器的额外数据，可在onUploadStart事件中使用settings方法动态设置。height30 设置浏览按钮的高度，默认值。itemTemplatefalse用于设置上传队列的HTML模板，可以使用以下标签：instanceID-Uploadify实例的ID，fileID队列中此文件的ID，或者理解为此任务的ID，fileName文件的名称，fileSize当前上传的文件大小methodPost提交方式Post或Get。multitrue 设置为true时可以上传多个文件。overrideEvents 设置哪些事件可以被重写，JSON格式，如:overrideEvents:['onUploadProgress']preventCachingtrue如果为true，则每次上传文件时自动加上一串随机字符串参数，防止URL缓存影响上传结果。progressData'percentage'设置上传进度显示方式，percentage显示上传百分比，speed显示上传速度。queueIDfalse设置上传队列容器DOM元素的ID,如果为false则自动生成一个队列容器。queueSizeLimit999队列最多显示的任务数量，如果选择的文件数量超过此限制，将会发出onSelectError事件。此项并非最大文件上传数量，如果要限制最大上传文件数量，应设置uploadLimit。removeCompletedtrue 是否自动将已完成任务从队列中删除，如果设置为false则会一直保留此任务显示。removeTimeout3如果设置了任务完成后自动从队列中删除，则可以规定从完成到被移除的时间间隔。requeueErrorsfalse如果设置为true，则单个任务上传失败后将返回错误，并重新加入任务队列上传。

successTimeout30文件上传成功后，服务端返回成功标志，此项设置返回结果的超时时间。swf‘uploadify.swf’uploadify.swf文件的相对路径。uploaderuploadify.php/uploadify.action后台处理程序的相对路径。uploadLimit999最大上传文件数量，如果达到或者超出限制将会触发onUploadError事件。width120 设置文件浏览按钮的宽度。

0 0