ThinkPHP Uploadify 图片上载

从官方网站下载的Uploadify最新版本：http://www.uploadify.com/download/

jQuery库是1.7.1版本。

下载好的Uploadify目录下面的文件有：

用到的文件有

uploadify.css

jquery.uploadify.min.js

下面先给出HTML代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>Demo</title>
 6     <link rel="stylesheet" type="text/css" href="/uploadify/uploadify.css" />
 7     <script type="text/javascript" src="/uploadify/jquery-1.7.1.min.js"></script>
 8     <script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>
 9 
10     <script type="text/javascript">
11     $(function(){
12         //这一行也是必要的，后面会调用
13         <?php $timestamp = time();?>
14         $('#editor_img').uploadify({
15             //这里往表单中添加数据
16             'formData'     : {
17                     'timestamp' : '<?php echo $timestamp;?>',
18                     'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
19                    //这是上传到的文件夹
20                     'folder'    : '__ROOT__/Uploads'
21                 },
22             'swf'             : '/uploadify/uploadify.swf',
23             'uploader'        : '/uploadify/uploadify.php',
24             'buttonClass'     : 'upload-image',
25             'fileTypeExts'    : '*.gif; *.jpg; *.png',
26             'width'           : 28,
27             'height'          : 28
28         });
29     });
30     </script>
31 </head>
32 <body>
33     <form id="form" action="{:U('Index/doData')}" method="post" class="think-form">
34             <!-- 注意这里的name必须写成 Filedata,下面会解释 -->
35             <input id="editor_img" type="file" name="Filedata" /> 
36             <input type="submit" value="提交" />
37     </form>
38 </body>
39 </html>

注意，uploadify.php函数是需要修改的，不然会报出很多错误，比如找不到文件，或者某个变量未定义等等，还可以修改返回值。

 1 <?php
 2 /*
 3 Uploadify
 4 Copyright (c) 2012 Reactive Apps, Ronnie Garcia
 5 Released under the MIT License <http://www.opensource.org/licenses/mit-license.php> 
 6 */
 7 
 8 // Define a destination
 9 $targetFolder = '/Uploads'; // Relative to the root
10 
11 $verifyToken = md5('unique_salt' . $_POST['timestamp']);
12 
13 if (!empty($_FILES) && $_POST['token'] == $verifyToken) { 
14 //这里接收传过来的目录
15     $targetFolder = $_POST['folder'];
16  //这里出现了Filedata，前面的文件名称对应这里就行，不然会报错
17     $tempFile = $_FILES['Filedata']['tmp_name'];
18     $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
19     $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
20     
21 // Validate the file type
22     $fileTypes = array('jpg','jpeg','gif','png'); // File extensions
23     $fileParts = pathinfo($_FILES['Filedata']['name']);
24     
25     if (in_array($fileParts['extension'],$fileTypes)) {
26         move_uploaded_file($tempFile,$targetFile);
27 //修改返回值，本来默认是返回1，现在改为返回相对路径
28         echo $targetFolder. '/' . $_FILES['Filedata']['name'];
29     } else {
30         echo 'Invalid file type.';
31     }
32 }
33 ?>

这样就可以把图片上传到服务器指定目录下了。

我不知道是版本问题还是别的原因，按照网上的做法总是出错，所以记下成功的配置，供需要的人参考。

接着更新一下，以上使用因为没有特别编辑Uploadify.php文件，用的是自带文件，所以前台的需要做相应的修改，比如后台用到了时间戳，前台需要传递参数等。不过关于Input的name在上面的例子里面为什么非要写成Filedata，还不是很清楚。

下面给出一个经典示例：

HTML页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Uploadify</title>
    <script type="text/javascript" src="/uploadify/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/uploadify/swfobject.js"></script>
    <script type="text/javascript" src="/uploadify/jquery.uploadify.js"></script>
    <link href="/uploadify/uploadify.css" type="text/css" rel="stylesheet"/>

    <script type="text/javascript">
    $(function(){
        <?php $timestamp = time();?>
        $('#file_upload').uploadify({
            'formData'     : {
                    'timestamp' : '<?php echo $timestamp;?>',
                    'token'     : '<?php echo md5('unique_salt' . $timestamp);?>',
                    'folder'          : '__ROOT__/Uploads'
                },
            'swf'             : '/uploadify/uploadify.swf',
            'uploader'        : '/uploadify/uploadify.php',
            'buttonClass'     : 'upload-image',
            'buttonText'      :'选择文件',
            'fileTypeExts'    : '*.gif; *.jpg; *.png; *.pdf',
            'width'           : 500,
            'height'          : 50,
            'auto'            : false,
            'cancelImg'       :'/uploadify/uploadify-cancel.png',
            'onUploadSuccess' : function(file, data, response) {
                var html = '<p id="file_name">'+file.name;
                html +='<a href="javascript:void(0)" onclick="delete_file_name(this);">删除</a>';
                html +='<input type="hidden" name="file_name" value="'+data+'"/></p>';
                $('#file_upload').after(html);
            }
        });
    });
    
    function delete_file_name(e){
        var $this = $(e);
        $this.parent('p').remove();
    }
    </script>
</head>
<body>
    <div style="500px; margin:auto;">
        <input id="file_upload" type="file" name="file_upload" />
        <p id="file_name"></p>
        <p>
            <a href="javascript:$('#file_upload').uploadify('upload')">上传</a>|
            <a href="javascript:$('#file_upload').uploadify('cancel')">取消上传</a>
        </p>
    </div>
</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']);

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
    $targetFolder = $_POST['folder'];
    $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
    //如果目录不存在则创建目录
    if(!file_exists($targetPath))
    {
        mkdir($targetPath,0777);
    }
    $targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
    
    // Validate the file type
    $fileTypes = array('jpg','jpeg','gif','png','pdf','txt','mp3'); // File extensions
    $fileParts = pathinfo($_FILES['Filedata']['name']);
    
    if (in_array($fileParts['extension'],$fileTypes)) {
        //处理了中文命名文件的上传
        move_uploaded_file($tempFile,iconv("UTF-8","gb2312",$targetFile));
        //返回的值data
        echo $targetFolder. '/' . $_FILES['Filedata']['name'];
    } else {
        echo 'Invalid file type.';
    }
}
?>

效果如下图：

如图所示，同时添加多个文件，点击上传的时候先上传第一个，再点击一次然后上传第二个，如果需要一次性上传自己研究一下吧。