Query异步上传文件插件Uploadify用法案例详解

作者：myadmin | 时间：2014-06-26 | 浏览：2896 | 0 条评论

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异步上传文件插件Uploadify用法案例详解

标签：

本站遵循CC协议署名-非商业性使用-相同方式共享

转载请注明来自：优优博库