ThinkPHP Uploadify 圖片上載

時間 2019-11-24

標籤 thinkphp uploadify 圖片上載欄目 PHP 简体版

原文原文鏈接

從官方網站下載的Uploadify最新版本：http://www.uploadify.com/download/javascript

jQuery庫是1.7.1版本。php

下載好的Uploadify目錄下面的文件有：css

用到的文件有html

uploadify.cssjava

jquery.uploadify.min.jsjquery

下面先給出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 ?>

這樣就能夠把圖片上傳到服務器指定目錄下了。post

我不知道是版本問題仍是別的緣由，按照網上的作法老是出錯，因此記下成功的配置，供須要的人蔘考。網站

接着更新一下，以上使用由於沒有特別編輯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="width: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.';
    }
}
?>

效果以下圖：

如圖所示，同時添加多個文件，點擊上傳的時候先上傳第一個，再點擊一次而後上傳第二個，若是須要一次性上傳本身研究一下吧。

相關標籤/搜索

thinkphp+uploadify+upload+phpexcel

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。