前端
<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);
}