jQuery文件上传控件 Uploadify 详解

jQuery文件上传控件文件上传控件 Uploadify 详解详解

本文主要介绍jQuery文件上传控件 Uploadify的用法，原作者做了非常详细的备注，有需要的朋友可以参考一下。

基于jquery的文件上传控件，支持ajax无刷新上传，多个文件同时上传，上传进行进度显示，删除已上传文件。

要求使用jquery1.4或以上版本，flash player 9.0.24以上。

有两个版本，一个用flash,一个是html5。html5的需要付费~所以这里只说flash版本的用法。

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

控件截图：

用法：用法：

<script>

　$(function(){

　　 $('#file_upload').uploadify({

　　 'swf' :'uploadify.swf',

　　　 'uploader':'uploadify.php'

　　 // Put your options here

　　　});

　　　});

</script>

这样子就完成了一个最基础的上传组建。基本原理是改变你创建的file input生成一个DOM结构，创建一个DIV按钮，按钮样式修改在uploadify.css文件中的.uploadify-button，将swf文件定位在按钮上面，

//设置上传按钮的class

buttonCursor: 'hand',

//设置鼠标移到按钮上的开状，接受两个值'hand'和'arrow'(手形和箭头)

buttonImage: 'img/browse-btn.png',

//设置图片按钮的路径（当你的按钮是一张图片时）。如果使用默认的样式，你还可以创建一个鼠标悬停状态，但要把两种状态的图片放在一起，并且默认的放上面，悬停状态的放在下面（原文好难表达啊：you can create a hover state for the button by stacking the off state above the hover state in the image）。这只是一个比较便利的选项，最好的方法还是把图片写在CSS里面。

buttonText: '<div>选择文件</div>',

//设置按钮文字。值会被当作html渲染，所以也可以包含html标签

checkExisting: '/uploadify/check-exists.php',

//接受一个文件路径。此文件检查正要上传的文件名是否已经存在目标目录中。存在时返回1，不存在时返回0(应该主要是作为后台的判断吧)，默认为false

debug: false,

//设置允许上传的文件扩展名（也就是文件类型）。但手动键入文件名可以绕过这种级别的安全检查，所以你应该始终在服务端中检查文件类型。输入多个扩展名时用分号隔开('*.jpg;*.png;*.gif')

fileTypeDesc: 'All Files',

//可选文件的描述。这个值出现在文件浏览窗口中的文件类型下拉选项中。（chrome下不支持，会显示为'自定义文件',ie and firefox下可显示描述）

formData: {

timestamp: '<?php echo $timestamp;?>',

token: '<?php echo md5('unique_salt' . $timestamp);?>'

},

//通过get或post上传文件时，此对象提供额外的数据。如果想动态设置这些值，必须在onUploadStartg事件中使用settings的方法设置。在后台脚本中使用 $_GET or $_POST arrays (PHP)存取这些值。看官网参考写法：http://www.uploadify.com/documentation/uploadify/formdata/

height: 30,

//设置按钮的高度(单位px)，默认为30.(不要在值里写上单位，并且要求一个整数，width也一样)

multi: false,

//设置是否允许一次选择多个文件，true为允许，false不允许

overrideEvents: [],

//重写事件，接受事件名称的数组作为参数。所设置的事件将可以被用户重写覆盖

preventCaching:true,

//是否缓存swf文件。默认为true，会给swf的url地址设置一个随机数，这样它就不会被缓存。(有些浏览器缓存了swf文件就会触发不了里面的事件--by rainweb)

progressData: 'percentage',

//设置文件上传时显示数据，有‘percentage' or ‘speed'两个参数(百分比和速度)

queueID: false,

//设置上传队列DOM元素的ID，上传的项目会增加进这个ID的DOM中。设置为false时则会自动生成队列DOM和ID。默认为false

requeueErrors: false,

//设置上传过程中因为出错导致上传失败的文件是否重新加入队列中上传

successTimeout: 30,

//设置文件上传后等待服务器响应的秒数，超出这个时间，将会被认为上传成功，默认为30秒

swf: 'uploadify.swf',

//swf的相对路径，必写项

uploader: 'uploadify.php'

//服务器端脚本文件路径，必写项

uploadLimit: 999

//上传文件的数量。达到或超出这数量会触发onUploadError方法。默认999

//文件被移除出队列时触发,返回file参数

onClearQueue: function(queueItemCount){

console.log(queueItemCount+'file(s) were removed frome the queue')

},

//当调用cancel方法且传入'*'这个参数的时候触发，其实就是移除掉整个队列里的文件时触发，上面有说cancel方法带*时取消整个上传队列

onDestroy: function(){

//调用destroy方法的时候触发

},

onDialogClose: function(queueData){

console.log(queueData.filesSelected+''+queueData.filesQueued+''+queueData.filesReplaced+''+queueData.filesCancelled+''+ queueData.filesErrored)