Thinkphp3.2.3 单图上传及生产缩略图

最新推荐文章于 2021-03-20 22:27:02 发布

自娱自乐22

最新推荐文章于 2021-03-20 22:27:02 发布

阅读量292

点赞数

CC 4.0 BY-SA版权

分类专栏： thinkphp 文章标签： thinkphp3.2.3 单图上传及处理

本文链接：https://blog.youkuaiyun.com/codipy/article/details/84135254

thinkphp 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了使用前端技术实现图片上传的功能，包括HTML文件输入、jQuery事件监听、FormData对象构造及Ajax异步请求。后端采用TP框架处理上传，生成不同尺寸的图片，并返回结果供前端展示。

前端

<div class="layui-form-item">
    <label class="layui-form-label">您的照片</label>
    <div class="layui-input-inline">
        <label for="upload" class="layui-btn" id="zq-upload">上传照片</label>
        <input type="file" id="upload" style="display: none;" />
        <input type="hidden" id="image" name="hd_img" />
        <input type="hidden" id="image_sm" name="hd_img_sm" />
        <input type="hidden" id="image_md" name="hd_img_md" />
        <div class="show-image" style="display: none;">
            <img class="responsive" src="" />
        </div>
    </div>
</div>

//上传图片
$("#upload").change(function() {
    var image = $(this).get(0).files[0];
    if (image.type.indexOf("image") >= 0) {
        var formdata = new FormData();
        formdata.append('file', image);
        $.ajax({
            url: "__CONTROLLER__/upload",
            type: "post",
            data: formdata,
            cache: false,
            contentType: false,
            processData: false,
            dataType: "json",
            success: function(res) {
                if (res["status"] == "0") {
                    $("#image").val(res["image"]["savepath"] + res["image"]["savename"]);
                    $("#image_sm").val(res["image"]["savepath"] + 'sm_' + res["image"]["savename"]);
                    $("#image_md").val(res["image"]["savepath"] + 'md_' + res["image"]["savename"]);
                    //sm小图全地址
                    $('input[name="hd_img_sm_all"]').attr('value', "__UPLOAD__/" + res["image"]["savepath"] + 'sm_' + res["image"]["savename"]);
                    //md中图全地址
                    $('input[name="hd_img_md_all"]').attr('value', "__UPLOAD__/" + res["image"]["savepath"] + 'md_' + res["image"]["savename"]);

                    //下面本来是显示原图，但是为了大小，这里显示中图即可。
                    $("#image").siblings(".show-image").show();
                    $("#image").siblings(".show-image").find("img").attr("src", "__UPLOAD__/" + res["image"]["savepath"] + 'md_' + res["image"]["savename"]);
                } else {
                    layer.msg(res["message"]);
                }
            }
        })
    } else {
        layer.msg('图片上传失败');
    }
})

tp后端处理

//活动图片上传
public function upload()
{
    $conf = array(
        'maxSize' => 0,
        'rootPath' => './Public/Upload/',
        'savePath' => 'hd/',
        'exts' => array('jpg', 'gif', 'png', 'jpeg', 'bmp'),
        'subName' => array('date', 'Ym')
    );
    $upload = new Upload($conf);

    $info = $upload->upload();
    //原图
    $bigname = $conf['rootPath'].$info['file']['savepath'].$info['file']['savename'];

    //小图-首页显示
    $im = new \Think\Image();
    //打开原图
    $im->open($bigname);
    //为原图制作 小图
    $im->thumb(328, 600);
    //保存
    $smallpic = $conf['rootPath'].$info['file']['savepath'].'sm_'.$info['file']['savename'];
    $sm = $im->save($smallpic);


    //中图-内容页显示
    $im->open($bigname);
    $im->thumb(600, 600);
    //保存
    $midpic = $conf['rootPath'].$info['file']['savepath'].'md_'.$info['file']['savename'];
    $md = $im->save($midpic);

    if ($info) {
        $ajax = array(
            'status' => '0',
            'message' => '上传成功',
            'image' => $info['file']
        );
    } else {
        $ajax = array(
            'status' => '1',
            'message' => $upload->getError()
        );
    }
    $this->ajaxReturn($ajax);
}