Query异步上传文件插件Uploadify用法案例详解
Uploadify简介
Uploadify是来自国外的一款优秀jQuery插件,主要功能是批量上传文件,此插件在项目中已被广泛之用。
提到上传,就会想到file标签。但是如果文件过大,或者多个文件的时候,这个html标签就有点力不从心了。
正因为自带标签的局限性,所以就有了今天的这个Uploadify这个插件的诞生。
uploadfiy这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能。
Uploadify功能特点详解
支持单文件或多文件上传,可控制并发上传的文件数
在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……
通过参数可配置上传文件类型及大小限制
通过参数可配置是否选择文件后自动上传
易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……)
通过接口参数和CSS控制外观
Uploadify用法案例下载包
包中对Uploadify的基本用法做了很详细的说明。
用auto.html和no_auto.html两个文件分别说明了自动触发上传和手动触发上传的区别。
对Uploadify的onUploadSuccess() 、onSelect()、onSelectonCancel()等事件做了详细说明。
包中的readme.txt更是对使用时候遇到的问题做了详细的提示和说明。
这是auto.html的内同
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>UploadiFive Test</title> <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> --> <script src="./uploadify/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="./uploadify/jquery.uploadify.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="./uploadify/uploadify.css"> <style type="text/css"> body { font: 13px Arial, Helvetica, Sans-serif; } </style> </head> <body> <h1>Uploadify Auto Upload Demo</h1> <form> <div id="queue"></div> <input id="file_upload" name="file_upload" type="file" multiple="true"> </form> <script type="text/javascript"> /* 本例是基于 uploadify3.2.1 版本编写 所有有些属性、方法或者事件和其他版本会有所不同 */ <?php $timestamp = time();?> $(function() { $('#file_upload').uploadify({ <!-- ---- ---- ---- ---- 自己测试时 uploader 修改为自己的服务器路径 ---- ---- ---- ---- -------- -------- ---- --> 'uploader' : '/my/uploadify/uploadify.php', //接收上传文件的php文件目录 'swf' : './uploadify/uploadify.swf', //上传flash目录 'formData' : { //Ajax异步提交额外参数设置 'timestamp' : '<?php echo $timestamp;?>', 'token' : '<?php echo md5('unique_salt' . $timestamp);?>' }, 'removeCompleted' : false, //进度条是否自动关闭 默认 true 自动关闭 'progressData' : 'percentage', //设置上传进度显示方式,默认percentage显示上传百分比,speed显示上传速度 //'fileObjName' : 'my_file', //文件上传对象的名称,如果命名为’my_file’,PHP程序可以用$_FILES['my_file']来处理上传的文件对象 'buttonText' : '上传', //按钮文字 //'cancelImg' : 'uploadify-cancel.png', //首次初始化Uploadify结束时触发 'onInit':function(){alert("Init something!");}, }); }); </script> </body> </html>
uploadify.php内容
<?php /* Uploadify Copyright (c) 2012 Reactive Apps, Ronnie Garcia Released under the MIT License <http://www.opensource.org/licenses/mit-license.php> */ // Define a destination $targetFolder = '/uploads'; // Relative to the root $verifyToken = md5('unique_salt' . $_POST['timestamp']); $return = array('status'=>0,'data','msg'); if (!empty($_FILES) && $_POST['token'] == $verifyToken) { $tempFile = $_FILES['Filedata']['tmp_name']; //$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder; $targetPath = realpath(dirname(__FILE__)) . $targetFolder; $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name']; // Validate the file type $fileTypes = array('jpg','jpeg','gif','png'); // File extensions $fileParts = pathinfo($_FILES['Filedata']['name']); if (in_array($fileParts['extension'],$fileTypes)) { move_uploaded_file($tempFile,$targetFile); $return['status'] = '1'; $return['data'] = realpath($targetFile); $return['msg'] = '上传成功!'; echo json_encode($return); } else { $return['msg'] = 'Invalid file type.'; echo json_encode($return); } } else { $return['msg'] = '参数传递错误'; echo json_encode($return); } ?>
想知道no_auto.html中的内容赶紧下载压缩包吧。哈哈~~
Uploadify用法案例下载包地址:uploadify插件应用详解
Uploadify原包下载地址: uploadify_v3.2.1
相关推荐
- Query树插件zTree用法案例详解
- Posted on 06月16日
- show profiles mysql查询优化之profile
- Posted on 04月05日
- linux双网卡配置内网
- Posted on 07月07日
- mysql 用户变量(@)和系统变量(@@ show variables 和 show global variables 区别)
- Posted on 04月01日