php 异步 显示图片,html5+JS+PHP 预览并异步上传图片的功能 – 转身_错过 – CSDN博客...

Html部分

微缩图 :

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(‘’);

// 返回给前台 图片地址 放到隐藏框中

} 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

———————

作者：转身_错过

来源：CSDN

原文：https://blog.csdn.net/qq_41321149/article/details/81293872

版权声明：本文为博主原创文章，转载请附上博文链接！