jQuery文件上传插件Uploadify使用指南
对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持 复制代码 代码如下: <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的按钮,点击后淡出 复制代码 代码如下: <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 + "rn" + "文件名:" + fileObj.name + "rn" + "文件大小:" + fileObj.size + "rn" + "创建时间:" + fileObj.creationDate + "rn" + "最后修改时间:" + fileObj.modificationDate + "rn" + "文件类型:" + 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |