您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > PHP框架 > ThinkPHP

ThinkPHP如何整合Uploadify上传插件实现异步上传图片

作者:Cheans  来源:转载  日期:2014-12-23 12:41:37
收藏  评论:( 1 )  阅读:545

1、首先到官网下载Uploadify插件。

2、在页面引入uploadify.css、jquery.uploadify.min.js。当然你得先把jquery引入。

3、配置uploadify:

<script type="text/javascript">
    $(function () {
        var sid = '{:session_id()}';
        $('#file_upload').uploadify({
            formData : {'session_id' : sid},
            swf : '__PUBLIC__/uploadify/uploadify.swf',
            uploader : "{:U(MODULE_NAME . '/' . CONTROLLER_NAME . '/uploadify')}",
            buttonText : '教师图片上传',
            fileTypeExt : '*.png;*.jpeg;*.jpg;*.gif;',
            fileTypeDesc : '选择图片',
            onUploadSuccess : function(file, data, response) {
                var src = '__ROOT__/Uploads/' + data;
                $('#img').attr('src', src);
                $('#pic').val(src);
            }
        });
    });
</script>

上传处理的地址就是uploadify方法,由于JS对上传文件的限制,上传文件不能做到异步上传。所以这里我把返回图片的地址赋值给一个隐藏的表单然后在用异步提交到数据库,有更好的方法的童鞋请在下方留言。

4、处理上传图片的方法代码:

//图像上传处理
  public function uploadify() {
      if (!empty($_FILES)) {
        //图片上传设置
        $config = array(
          'maxSize'    =>    3145728,
          'savePath'   =>    '',
          'saveName'   =>    array('uniqid',''),
          'exts'       =>    array('jpg', 'gif', 'png', 'jpeg'),
          'autoSub'    =>    true,
          'subName'    =>    array('date','Ymd'),
        );
        $upload = new \Think\Upload($config);// 实例化上传类
        $info = $upload->upload();
        if(!$info) {
          //上传错误提示信息
          $this->error($upload->getError());
        } else {
          foreach($info as $file){
            echo $file['savepath'].$file['savename'];
          }
        }
      }
    }

PS:在根目录创建Uploads目录

HTML代码

<img id="img" src="__PUBLIC__/Images/nopic.png" width="480" height="249" border="0" /><br>
<span>上传图片尺寸建议为480*249</span><br>
<input type="hidden" name="pic" id="pic">
<input id="file_upload" type="file"  multiple="true" size="60" />

对于出现302 error 的同学,是因为需要传递session值给uploadify。在配置uploadify的时候加上这一项就能解决了formData : {'session_id' : sid},当然得先定义var sid = '{:session_id()}';。希望对大家有所帮助!


原文地址:http://blog.csdn.net/u014250420/article/details/42098889



除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/think/1071.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论