ajax异步头像裁剪之异步图片上传_视频教程

浏览:2225 发布日期:2015/12/06 分类:技术分享 关键字: thinkphp 异步上传 头像裁剪 异步图片上传 PHP异步上传 图片上传
对于现在的互联网什么产品都在讲用户体验, 产品经理总说, 这个地方怎么又跳转了 体验好差啊. 因此为了有些地方我们还是需要用的异步去处理文件分页等等功能.
对于今天 我为大家献上一个异步头像裁剪的功能 这个功能我将分为三部分进行分解. 希望大家关注哈 ^v^

jq.form插件 http://www.cnblogs.com/kissdodog/archive/2012/12/13/2817191.html

如果大家看代码不太明白可以下载视频观看哈 视频地址:
http://yunpan.cn/c3xuz6hhW9H9e http://yunpan.cn/c3xuz6hhW9H9e 访问密码 20e6


现在只有异步图片上传部分, 后面我将其它部分功能完善下面

如果大家看的明白代码可以直接看代码

视图部分:<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax - 头像裁剪功能 </title>
    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/jquery.form.min.js"></script>
</head>
<body>
    
    <h1>ajax - 头像裁剪功能</h1>

    <form id="form1" method="POST" enctype="multipart/form-data" action="{:U('Index/ajaxUpload')}">
        <input type="file" name="Picture" />
        <input type="submit" value="上传图片" />
    </form>


    <script>
        $(function(){
            $("#form1").ajaxForm(function(res){
                alert('上传成功');
                alert(res);
                console.log(res);

                return false;
            });
        })


    </script>
</body>
</html>
控制器部分:    /* 异步上传文件 No.1 */
    public function ajaxUpload()
    {
         $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =     './Uploads/'; // 设置附件上传根目录
        $upload->savePath  =     ''; // 设置附件上传(子)目录
        // 上传文件 
        $info   =   $upload->upload();
        print_r($info);die;
        if(!$info) {// 上传错误提示错误信息
            $this->error($upload->getError());
        }else{// 上传成功
            $this->success('上传成功!');
        }
    }


    /* 处理图片裁剪 No.2 */



    /* 处理数据存储 No.3 */


    /* jq.form 原理解说 */

附件 thinkphp_头像裁剪之异步图片上传部分代码.rar ( 1.98 MB 下载:107 次 )

最佳答案
评论( 相关
后面还有条评论,点击查看>>