Mikel
来源： html5+JS+PHP 预览并异步上传图片的功能 – 转身_错过 – CSDN博客
Html部分
<div class=”from-group clearfix from-group-padding”>
<label class=”col-sm-1 label-right”>微缩图 :</label>
<div class=”col-sm-2″>
<a href=”JavaScript:;” id=”uploadimg”>
<img src=”/images/default-thumbnail.png” width=”180″ style=”” id=”imgpre”>
<input type=”file” id=”imgFile” onchange=”imgPreview(this);return false;”/>
<input type=”hidden” name=”course_pic” value=”” id=”getpic”>
</a>
</div>
<div class=”input-note”>尺寸：640px × 363px</div>
</div>
CSS部分
/* 图片上传CSS */
#uploadimg{display:block; width:180px; height:180px;position:relative; overflow:hidden;}
#imgFile{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);cursor:pointer}
js部分
function imgPreview(fileDom){
//判断是否支持FileReader
if (window.FileReader) {
var reader = new FileReader();
} else {
toastr.error(‘不支持FileReader API 请升级您的设备’);
}
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
toastr.error(‘请选择图片！’);
return;
}
//读取完成
reader.onload = function(e) {
// //获取图片展示的dom
// var img = document.getElementById(“imgpre”);
// // 图片路径设置为读取的图片
// img.src = e.target.result;
// ajax 上传图片
$.post(“/Course/uploadimg”, {course_img: e.target.result}, function(ret) {
if (ret.img!=”) {
toastr.success(‘图片上传成功!’);
$(‘#imgpre’).attr(‘src’,’/’+ret.img);
$(‘#getpic’).attr(‘value’,’/’+ret.img);
alert(ret.img);
// $(‘#showimg’).html(‘<img src=”‘ + ret.img + ‘”>’);
// 返回给前台 图片地址 放到隐藏框中
} else {
toastr.error(‘图片上传错误!’);
}
},’json’);
};
reader.readAsDataURL(file);
}//imgPreview结束
php部分
public function uploadimg(){
$pic = Request::param();
//获取图片信息
list($type,$file) = explode(‘,’,$pic[‘course_img’]);
// 判断类型
if(strstr($type,’image/jpeg’)!=”){
$ext = ‘.jpg’;
}elseif(strstr($type,’image/gif’)!=”){
$ext = ‘.gif’;
}elseif(strstr($type,’image/png’)!=”){
$ext = ‘.png’;
}
// 生成的文件名
$photo = md5(time()).$ext;
$file_dir = ‘uploads/images/’.Date(‘Ymd’);
//判断文件夹是否存在
if (!is_dir($file_dir)) {
mkdir($file_dir,755,true);
}
if(file_put_contents($file_dir.’/’.$photo,base64_decode($file), true)){
$ret = [‘img’=>$file_dir.’/’.$photo];
//这里必须用echo返回json 用return JQuery接收不到
echo json_encode($ret);
}
}
———————
作者：转身_错过
来源：CSDN
原文：https://blog.csdn.net/qq_41321149/article/details/81293872
版权声明：本文为博主原创文章，转载请附上博文链接！
