前端

<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>
 

JS

//上傳圖片
$("#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);
}