ThinkPHP Uploadify 图片上载

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

jQuery库是1.7.1版本。

下载好的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,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" alt="" />

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

ThinkPHP Uploadify 图片上载的更多相关文章

使用ThinkPHP+Uploadify实现图片上传功能
首先,将下载的Uploadify压缩包解压放到公共文件夹内.实现代码如下: 前台html部分: <script src="/uploadify/jquery.min.js" ...
Thinkphp框架图片上传实例
https://www.cnblogs.com/wupeiky/p/5802191.html [原文转载自:https://www.cnblogs.com/guoyachao/p/628286 ...
uploadify图片上传发生Security Error
今天在使用uploadify进行图片上传的时候出现security error.其根本原因是flash跨域问题.主要原因是因为配了两个域名www.ttyouni.com 和 ttyouni.com 在 ...
thinkphp给图片打水印不清晰
项目中打印条形码的函数,从thinkphp自带的water函数修改而来的. 贴上代码: /** * water2 * 改写thinkphp的water函数更强健的函数,增加了写入位置参数去掉了alp ...
ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
前端HTML+JQuery 备注Jquery需要1.x版本,不能用2.x版本 1.引入必要文件及上传input <load file="__PUBLIC__/js/jquery-1. ...
uploadify 图片上传
遇到的问题总结: 1.//图片排序 $("#pics").sortable(); 2.//上传的文件对象名,与后台所传参数名保持一致,最初因为这个名称错误浪费了许久时间 fileO ...
uploadify图片上传配置
参考:http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html 官网地址:http://www.uploadify.com/ ...
php thinkphp uploadify
模板文件: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w ...
Java重点之小白解析--浅谈数据流形式图片上载
文档上载,上载也不知道哪个大神(混球)起的名字,读起来怪怪的,反正平时我只读上传. 闲话少说,直入主题.先等等这两天做文件上传,都快把宝宝折磨疯了,不会呀,各种查呀,最可悲的是废了老大功夫学会了传送文 ...

随机推荐

Java Networking: InetAddress
The InetAddress is Java's representation of an IP address. Instances of this class are used together ...
hdoj 1083 Courses【匈牙利算法】
Courses Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
nyoj 55 懒省事的小明【优先队列】
懒省事的小明时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述小明很想吃果子,正好果园果子熟了.在果园里,小明已经将所有的果子打了下来,而且按果子的不同种 ...
iOS新建项目基本配置
项目整体同xib+代码的方式 1.调整项目文件结构 2.将资源图片导入工程 General->LaunchScreen 修改 3.App名称修改 info->Bundle name 4.删 ...
JSONP安全防范解决方案新思路
jsonp安全性防范,分为以下几点:1. 防止callback参数意外截断js代码,特殊字符单引号双引号,换行符均存在风险2. 防止callback参数恶意添加标签(如script),造成XSS漏洞3 ...
springsecurity4+springboot 实现remember-me 发现springsecurity 的BUG
前言:现在开发中,记住我这个功能是普遍的,用户不可能每次登录都要输入用户名密码.昨天准备用spring security的记住我功能,各种坑啊,吐血 . 先看下具体实现吧. spring securi ...
How to easily concatenate text based on criteria in Excel? 如何将Excel中的文本按条件合并
To combine text with the unique ID numbers, you can extract the unique values first and then create ...
详解Android动画之Tween Animation
前面讲了动画中的Frame动画,今天就来详细讲解一下Tween动画的使用. 同样,在开始实例演示之前,先引用官方文档中的一段话: Tween动画是操作某个控件让其展现出旋转.渐变.移动.缩放的这么一种 ...
lua 基本
Lua 的语法比较简单,学习起来也比较省力,但功能却并不弱. 所以,我只简单的归纳一下 Lua 的一些语法规则,使用起来方便好查就可以了.估计看完了,就懂得怎么写 Lua 程序了. 在 Lua 中,一 ...
CHENEY-YANG'S BLOG(cheney-yang)
This is Cheney-Yang's blog ! Welcome to here ! This is Cheney-Yang's blog ! Welcome to here ! This i ...

ThinkPHP Uploadify 图片上载

ThinkPHP Uploadify 图片上载的更多相关文章

随机推荐

热门专题