uploadify使用若干问题

最新推荐文章于 2019-08-12 14:53:36 发布

xiaoyu-Wang

最新推荐文章于 2019-08-12 14:53:36 发布

阅读量2.8k

点赞数

分类专栏： APP服务器开发 web前端开发 jQuery 文章标签：文件上传 php JS uploadify

本文链接：https://blog.csdn.net/u014656992/article/details/46954311

版权

APP服务器开发同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

web前端开发

3 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

uploadify使用若干问题

uploadify是一个js+php文件上传包，支持大文件上传，文件可以是图片，视频等多媒体文件。下面罗列我自己使用时碰到的一些问题与注意事项：
附：官网地址http://www.uploadify.com/

对于官网源代码的详解
官网中给的demo是php，如何在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="jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
    font: 13px Arial, Helvetica, Sans-serif;
}
</style>
</head>

<body>
    <h1>Uploadify Demo</h1>
    <form>
        <div id="queue"></div>
        <input id="file_upload" name="file_upload" type="file" multiple="true">
    </form>

    <script type="text/javascript">
        <?php $timestamp = time();?>  //时间戳用于计算上传进度
        $(function() {
            $('#file_upload').uploadify({
                'formData'     : {
                    'timestamp' : '<?php echo $timestamp;?>',
                    'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
                },
                'swf'      : 'uploadify.swf',   //上传图标（是一个动态图）
                'uploader' : 'uploadify.php',   //指向上传动作的真正执行者
                'auto'  : 'true',
                'uploadLimit' : 1,
                'fileSizeLimit' : '1GB',
                'onUploadSuccess' : function(file, data, response) {    //data是从uploadify.php中传过来的
                            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
                }
            });
        });
    </script>
</body>
</html>

二、如何在html中使用？
html使用代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta 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="jquery.uploadify.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="uploadify.css">
    <style type="text/css">
        body {
            font: 13px Arial, Helvetica, Sans-serif;
        }
    </style>
</head>
<body>

<h1>Uploadify Demo</h1>
<form>
    <div id="queue"></div>
    <input id="file_upload" name="file_upload" type="file" multiple="true">
</form>

<script type="text/javascript">
    $(function() {
        $('#file_upload').uploadify({
            'swf'      : 'uploadify.swf',
            'uploader' : 'uploadify.php',
            'auto'  : 'true',
            'uploadLimit' : 1,
            'fileSizeLimit' : '1GB',
            'onUploadSuccess' : function(file, data, response) {
                alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response);
            }
        });
    });
</script>

</body>
</html>

三、上传大文件出错问题:
具体表现：文件上传到一部分提示IO Error。
（1）若是服务器代码使用了php，则上传出错的原因是php.ini配置文件限制了上传文件的大小。修改配置文件中的以下参数：
配置php.ini文件（以上传500M以下大小的文件为例）
查找以下选项并修改->
file_uploads = On ;打开文件上传选项
upload_max_filesize = 500M ;上传文件上限

如果要上传比较大的文件，仅仅以上两条还不够，必须把服务器缓存上限调大，把脚本最大执行时间变长
post_max_size = 500M ;post上限
Max_execution_time = 1800 ;Maximum execution time of each script, in seconds脚本最大执行时间
max_input_time = 1800 ; Maximum amount of time each script may spend parsing request data
memory_limit = 128M ; Maximum amount of memory a script may consume (128MB)内存上限

(2)如果同时使用了apache，需要修改httpd.conf
(3)如果同时使用了nginx，需要修改nginx.conf中的
client_max_body_size 字段。
注意：总配置文件和分配置文件都要修改。

四、文件重命名问题：
由于上传文件往往需要存到服务器上，并且在数据库中给出上传文件的URL便于访问。所以需要对用户上传的文件重命名，且对于每一时刻的上传文件命名不能重复，一般需要上传写入服务器磁盘之前对文件重命名，重命名采用时分秒命名。
uplodify.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 = 'stStone/Tpl/images/'; // Relative to the root

$verifyToken = md5('unique_salt' . $_POST['timestamp']);

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
    $tempFile = $_FILES['Filedata']['tmp_name'];
　　 //由于是要前台显示，所以用了很多个dirname()
    $targetPath =  dirname(dirname(dirname(dirname(dirname(__FILE__))))).'/Tpl/Index/images/';
    //获取文件的一些信息
    $fileParts = pathinfo($_FILES['Filedata']['name']);
    //图片名称规则是 当前时间的时分秒.类型 如:20131221030820.jpg
    $filenames = date("YmdHis").".".$fileParts['extension'];
    //图片的完整路径咯
    $targetFile = rtrim($targetPath,'/') . '/' .$filenames;
    // Validate the file type
    $fileTypes = array('jpg','jpeg','gif','png'); // File extensions


    if (in_array($fileParts['extension'],$fileTypes)) {
        if(!file_exists($targetFile)){
            move_uploaded_file($tempFile,$targetFile);
            chmod($targetFile,0777);
        }else{
            unlink($targetFile);
            move_uploaded_file($tempFile,$targetFile);
            chmod($targetFile,0777);
        }
        //必须得返回这个图片名称,传递到调用页面
        echo $filenames;
    } else {
        echo 'Invalid file type.';
    }
}
?>

页面调用方法：

<?php $timestamp = strtotime(date("YmdHis")); ?>
    jQuery('#scroll_upload').uploadify({
        'multi':false,
        'formData'     : {
                'timestamp' : '<?php echo $timestamp;?>',
                'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
        },
        'swf':'<?php echo APP_PATH?>Tpl/Index/uploadify/uploadify.swf',
        'uploader': '<?php echo APP_PATH?>Tpl/Index/uploadify/uploadify.php',
         'buttonText':'上传图片',
         'auto': false,
         'multi': false,
        'onUploadSuccess' : function(file, data, response) {
　　　　　　　　　　alert("新图片名字是"+data);  //data从uploadify.php中传过来的
         }
    });