html部分:
<div class="file-box">
<img id="preview" />
<input type="file" name="file" id="input_file" accept="image/*" onchange="imgPreview(this)" />
</div>
JS部分:
1、使用FileReader获取图片资源
function imgPreview(fileDom) {
//判断是否支持FileReader
if(window.FileReader) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
}
//获取文件
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是图片
if(!imageType.test(file.type)) {
alert("请选择图片!");
return;
}
//读取完成
reader.onload = function(e) {
//获取图片dom
var img = document.getElementById("preview");
//图片路径设置为读取的图片
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
2、获取图片资源后进行上传操作
var formData = new FormData();
formData.append('file', $('#input_file')[0].files[0]); //添加图片信息的参数
formData.append('id',123456); //添加其他参数
$.ajax({
url: '/index/uploadImage',//上传地址
type: 'POST',
cache: false, //上传文件不需要缓存
data: formData,
success: function (data) {
var r = JSON.parse(data);
if(r.code=='1'){
alert("上传成功!");
}else{
alert(r.msg);
}
},
error: function (data) {
alert("上传失败");
}
});
3、后端thinkphp5.1处理上传结果
public function uploadImage(){
$post = I('post.');
$img = $post['file'];
$name = randStr(8);
$content = explode( ',' , $img);
//临时存放地址$url,上传目录确认权限和是否已创建
$url = "./Uploads/$name.png";
$succ = file_put_contents($url, base64_decode($content[1]));
if($succ){
$result = ['code'=>1,'msg'=>'成功','url'=>$url];
}else{
$result = ['code'=>0,'msg'=>'系统出错'];
}
echo json_encode($result);
}