ThinkPHP Uploadify 图片上载

时间：2021-06-09 14:24:44

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

jQuery库是1.7.1版本。

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

ThinkPHP Uploadify 图片上载

用到的文件有

uploadify.css

jquery.uploadify.min.js

下面先给出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>Demo</title>

     <link rel="stylesheet" type="text/css" href="/uploadify/uploadify.css" />

     <script type="text/javascript" src="/uploadify/jquery-1.7.1.min.js"></script>

     <script type="text/javascript" src="/uploadify/jquery.uploadify.min.js"></script>

     <script type="text/javascript">

     $(function(){

         //这一行也是必要的，后面会调用

         <?php $timestamp = time();?>

         $('#editor_img').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',

             'fileTypeExts'    : '*.gif; *.jpg; *.png',

             'width'           : 28,

             'height'          : 28

         });

     });

     </script>

 </head>

 <body>

     <form id="form" action="{:U('Index/doData')}" method="post" class="think-form">

             <!-- 注意这里的name必须写成 Filedata,下面会解释 -->

             <input id="editor_img" type="file" name="Filedata" />

             <input type="submit" value="提交" />

     </form>

 </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'];

  //这里出现了Filedata，前面的文件名称对应这里就行，不然会报错

     $tempFile = $_FILES['Filedata']['tmp_name'];

     $targetPath = $_SERVER['DOCUMENT_ROOT'] . $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);

 //修改返回值，本来默认是返回1，现在改为返回相对路径

         echo $targetFolder. '/' . $_FILES['Filedata']['name'];

     } else {

         echo 'Invalid file type.';

     }

 }

 ?>

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

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

接着更新一下，以上使用因为没有特别编辑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.';

    }

}

?>

效果如下图：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh4AAADYCAIAAAArj32dAAAOgklEQVR4nO3dz27cVnsH4LkLXYYA6x4iWwaCtI3atK477eRrv6//u8m+u0AbAQFsBIWBIAsjSLwQBCS6gl6BAW8EGAayKKCNlEUwEqANu6CG4vCQHIpzNIeinwdazBweHnKcwfvT4SGVSQYAUU1SnwAAYyNaAIhMtAAQmWgBILL+0fLfAIyaaAEgsmTR8l8AjE7iaPlPAEYncbT8BwCjI1oAiCxxtPw7AKMjWgCILHG0/BsAo5M4Wv4VgNERLQBEljha/gWA0UkcLf8MwOiIFgAiSxwtfwJgdBJHyx8BGB3RAkBkiaPlnwAYncTR8o8AjI5oASCyxNHyBxi2p0+fPn36tL2laP/ss8+e1ukybNjh888/794fBiVxtHwJw5Z/Xff29r788su9vb1nz57lLbU9Ly4uar/t7cM2HffDhw97e3t5n6ZxYJhEC6xQlPUsy968eVOkQiUYsiy7uLgo+j979mxvb68cCXvLyuMUip5Zlv3666/lQ2eihYcjcbTM4IF48uRJ+DUuNuVbz8/Pnzx5MpvNsiz76aefyn3yxpWKnhcXF8UuxaGfLGz808PdiBZoVJTyTz/9tCj95QzIVb7bs1IOhTHQtHv5oFmWXVxc1IZZuDsMUOJo+QcYsOLrmhf6YnaSlSYQ5c4fPnwo+hSzlrBb3pi/LQasdCiWbcqNG/nQEEHiaPl7GLwsy87Pz5u+yeVu79+/zxt/+eWXLMs+fPgQdst7Fi3h1uKITbvA8IkWWKFc6LMsOz4+rpT+x48fP378uPhuF2/fv3+fvw4HzLLsiy++KPaqPeLjkvLI4YAwNImjZQqDlxf66XS6u7ubLWYk5+fnu7u7u7u7eYdc3i38tteO+eOPP7ZsbZkn1e4Cg5I4Wv4OBi/LsvPz808++ST/6hYtxdtKt1y+tXhbGbPcoemIlZbysWDgRAu0yTOgNkjClpapRnnAfMyff/453xRmTyZaeOASR8tzGLDaDKgo9zw/Py/2zXepjFZMVopNxdvyaJWhakeDIRMt0Kg2AyrKW3/77bfafSsjNB2oPFp5qNrRYMgSR8vfAjA6iaPlGQCjI1oAiCxxtPwNAKOTOFr+GoDRES0ARJY4Wr4AYHQSR8tfATA6ogWAyBJHy18CMDqJo2UfgNERLQBEljhaPgdgdBJHy18AMDqiBYDIEkfLnwMwOqIFgMgSR8ufATA6iaPlMwBGJ3G0ADBWogWAyBJECwDUEi0ARCZaAIhMtAAQmWgBIDLRAkBkogWAyEQLAJGJFgAiEy0ARCZaAIhMtAAQmWgBILI00TKZVI8btkBuMrlYswOwYcOKlkr7pJvNnTdRTSYXxU/4ttyttn/YARiIjdbllmAIX2R1SVM75r2dL/ernBnh26ZulQ6VfYEhWLcuHz7fyRNi5/lhl/abo3a7INYjWorjbm3PzkrtJwezvH12cBKMcXpQbTzdWSRf3fmH/RuPW9t+enxYDtfgENXxm/rHas+y7OzdydZN89bJu/InaHe6M5kcHp927r9kZbTUtoe5Er4G0lorWk4OZkV5Ony+U7yuba+dsjS5ObnlGczKPofPd4oyVz6f0+PDyWTnNMsqpbCop8t5czbb3l6U17PZ9laxtaF/43Gbz+e72vLdNH5T/1jtZ+9Otm7+fZbOs4OU0RJmiXSBgVgnWk53ln7DLd42tS8O2bCsUnNypfyYNFwoK70+3VnUxyzLzt6dbN9MFM5m21tF+Ts9PgwnNEG03PYPtoYtTcdtas9ODg5ainHdEev7x2ovR+Am9YiWcFPtgs3mPgNQp3+0BDX6piI3td8cb1VChI2VTc2ZdLpT+n1/ucTfZlv5N/RcWMpLzmbbu5WiWxctTcetbR9atCxF4Catf0Gs0h8YiP7RUr7qlTt8vjM7OGlqz5qviWXdlvE7thSnl+dZkCXVWVRDtOTLLTULD61RdHvclvaTg4PjxbJHZQpVO35T/yjt+b/P/96utXSNmcUy0s0/Ub6adXh8vFimKv/Tnc22F8MvrvhVJhzhT7YqcgqiBYZmc9HSEiFN7eFaS/lF7Ti5s3cnu4tz6BstN3uXp1wr+5eP29JeWY+p/HOF4zf1j/I6X+DZup1RzcK0a1Zel8rD5uafujx5LX63qPTvN2vJgutgYSYBaW101pKtWo0P86bSrcum8qWnbN1oqY7W0j/s2d7ecHqrz2erbmLRuz3osFT9V6lGSymGbzctR0v56mj/aCmfhDiBoVl3reW7g9nk5jbWpbWWsP3meK2zlqapTPF25QWxujq+zlpLFi5F1Pbvlyvdx2/pv2b7BqKlfEGs/NF6L+N3XIMBUukfLfmFlEV4bH93/F3pt+Ca9pvjNcxass7rKK3xc7q7vLRwmmV3v0OseoNyh1lL7XGb2u86flP/e2m/46p+x1nLbm1Wxbr5uOV2ZCCJtZ5rKa7XL5Zwq89wVNqz5llL7abatZamvYK7uc6+ev5VXs+anmvJBVfwlmY55at5Df2bjtvUvlS7O4zf1D9We/6f6XaNZHH0s9n21qp1l2q0NKzZ3D6CWl7e7/00fsfXQCrRnsbf2p6dZWfvllZ0a9rDWUv5UljlsljTEkulJX9Rep78RrlA1z6NX9ll+Tf3Scf+TcdtPZ/6p/27nE+QOlHaa/9qQJ9o+ergILjTrDINuk3cypMo3aOlZa1FtMAQxPoDXPnF9PBCSrU9TIuseXYy6SbSR6CrYsZTWaepffSy7jaKndOGeOj3+L04gaHZdF0Ok6ClpUtsiJbNK/0tstvMaPkrbcuzsZpHhVqmHStnJHIFBkhdBiAy0UIaK5/GX/Mn9eeDj5poASAy0QJAZKIFgMhECwCRiRYAIhMtAEQmWgCITLQAEJloASAy0QJAZKIFgMhECwCRiRYAIhMtAEQmWgCITLQAEJloASCytaLl+vr68vJyDrCGy8vL6+vrWEWNIegfLdfX16m/kMB4SJcx6R8tV1dXqb+KwHhcXV1FLG2k1T9aUn8PgbGJWNpIS7QAQxGxtJGWaAGGImJpIy3RAgxFxNJGWqIFGIqIpY20RAswFBFLG2mJFmAoIpY20hItwFBELG2kJVqAoYhY2khLtAARvHnz5ttvvw3bX7169cMPP3QcJGJpI62k0fL260eT6dGagxxNJ5NHX7+NcDo9Drz22cMYvHnzZn9/f39/v5Iur169yts7pkvE0kZa9xktb79+NMndX+k/mlYHf/v1o6WWo+mkpLyp0nP5bX7y06PyxwhGOJoKF5jPX758ub/w8uXLvLHIlf39/W+++eb3339fOU7E0kZa9xctpSlJWP8jqUx7FiFQjZaw/Nf1LEXL268f3W5ajpzlz1LNMfhYVdKlR67MRcuI3Fu0LBXdugp8M5vIy/7RdDKdToN5wdKEoT4ggtaaWUvDzKJh1rKUK0G3o+nS6LIFFsrp0iNX5qJlRNJFy3xeKvvldYtiXlCeINQGRNOEpPGC2HLvumg5quTKPLggVhnENTG4VUmXO+XKXLSMyHCi5bZA30RKta1ntCxtWeofRstkMplOq1fvarqVRhEtcKt8HWx/f//Fixd32j1iaSOtgUbL9Ki+rWH3xgO3bmp8276eEqy9iBaYz4NcqazqdxGxtJHWppfxl+/YrY2WRe/y9KD+NuUuay1H06LH6llLeem+OOVgwPInsNYC8/k8uB/sxYsXPdIlYmkjrU3ffNwcLTWLGaUBHtU+AdNwh1j5mOW2hvsDbnsG18dqbj5uSyf4ONXeD1Z7R3K7iKWNtFI/Mnl7Car1slLj7cv3dl9zJ66GwXw+n79+/bp23b5Il++//77LOBFLG2klipbFTKB0V1jzwyf1dx4veBofBuD169e194O9fPmyY67MRcuI+BtiwFBELG2kJVqAoYhY2khLtABDEbG0kZZoAYYiYmkjLdECDEXE0kZaogUYioiljbRECzAUEUsbaYkWYCgiljbSEi3AUEQsbaQlWoChiFjaSEu0AEMRsbSR1n1Fy+R/sv8DWCZaPhKiBdgc0fKREC3A5oiWj4S1FmAoIpY20hItwFBELG2kJVqAoYhY2khLtABDEbG0kZZoAYYiYmkjLdECDEXE0kZaogUYioiljbT6R8vV1VXq7yEwHldXVxFLG2n1j5br6+vUX0VgPK6vryOWNtLqHy1Zll1fX19eXqb+QgIP2+XlpVwZmbWiBQBCogWAyEQLAJGJFgAiEy0ARCZaAIhMtAAQmWgBIDLRAkBkogWAyEQLAJGJFgAiEy0ARCZaAIhMtAAQmWgBIDLRAkBkMaNlMrno17N9x9Pjw8Pj0/6ndXcdP8g9fV6Ah2480TKZXDT9dDyT4nX4YuW+K8+t344AD9F4oiUcKn+9Mmlqd+lyYqIFoFaCaCkX7i4zjDWjpamxZZdKwHQ5Vpdud51RATxQKaOl4453jZawcK/Mmzudz/rdJAowbpuOlvBX9ZV73d+sJTyT3us0LX1cDQM+NpGjpcvCRtMSSNNeG4iWpitgK6PlPj4vwEO30VlLbQWPPmvpeEFs5YmtPLd7+rwAD93moqV7oa9Yf9aSNYdH5cQiXhDr/XkBHrqP4g6xrHO0tIzWfqwu3VwKAz4Sg7hDrH1Tv2iplO8wWsLift/R0nsEgIclcbR0uVjU72n8cMD2KUs4wpoXxJoOcdfdAR6c9LOWlktVue6zlvYs6RIt7QPeaWv7acgVYMTSR8vKHXv/ecouay1JLojJFWDc+kdL7eWjpp/KjrWjNR1o/WhpyY/uy/4b+7wAD12C/1/LhqOl+6ShSyT0Po2O5wAwAv5XYABEtqELYj1+hnY+Q/u8AINl1gJAZKIFgMhECwCRiRYAIhMtAEQmWgCITLQAEJloASAy0QJAZKIFgMhECwCRiRYAIhMtAEQmWgCITLQAEJloASAy0QJAZKIFgMhECwCRiRYAIhMtAEQmWgCITLQAEJloASAy0QJAZKIFgMj+H9rHEdH5jhn5AAAAAElFTkSuQmCC" alt="" />

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

相关文章