简单的做一个图片上传预览(web前端)
借鉴网址:https://blog.csdn.net/static_coder/article/details/78072171
https://segmentfault.com/a/1190000006140042
1、js之FileReader
HTML5的FileReader的使用:https://blog.csdn.net/zyddj123/article/details/72519149
FileReader() 是一个构造函数。 使用的时候,先通过构造函数初始化一个FileReader对象,如:
const reader= new FileReader()
开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内>容。
reader.readAsDataURL(file)
在读取后,触发的事件,并获取读取文件的地址
reader.onload = (e) => {
let base64Str = reader.result.split(',')[1]
img.src = e.target.result
}
https://segmentfault.com/a/1190000012327982
https://segmentfault.com/a/1190000012327982
方法1
<body class="bg">
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0">
<input type="file" name="file0" id="file0" multiple="multiple" /><br>
<img src="" id="img0"》
</form>
</body>
<script>
$("#file0").change(function () {
$("#img0").show();
var objUrl = getObjectURL(this.files[0]);//获取文件信息
console.log("objUrl = " + objUrl);
if (objUrl) {
$("#img0").attr("src", objUrl);
}
});
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
方法2
选择了图片之后,js会先把已选的图片转化为base64格式,然后通过ajax上传到服务器端,服务器端再转化为图片,进行储存的一个过程。
<script>
$('#file0').change(function(){
var file = this.files[0]
/*验证文件的后缀
var name=file.name;
var namepre = name.substring(name.indexOf("."));//截取出文件后缀
var nametype= file.type;
var reg = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/;
if(reg.test(namepre)){
type='img'
}*/
if(file.size>2*1024*1024){
return false;
}
var reader=new FileReader();
reader.onload=function(){
var base64=this.result;
base64_uploading(base64);
/*console.log(base64);*/
$('#img0').attr('src', base64)
}
reader.readAsDataURL(file);
})
function base64_uploading(base64){
$ajax({
type:'post',
url:'',
data:{
'data': base64
},
dataType:'json',
success:function(data){
console.log(data)
},
error: function (xhr, type) {
}
})
}
</script>
上传图片
1、html
<div class="uploadImgItem">
<div class="uploadImgBox">
<span class="uploadImgBox_del glyphicon glyphicon-trash"></span>
<input class="uploadImgSrc" type="hidden" value="{{item.attachment.path}}">
<input class="attachmentUuid" type="hidden" value="{{item.attachmentUuid}}">
<input class="uuid" type="hidden" value="{{item.uuid}}">
<input class="uploadImgP" type="hidden" value="{{item.certificatesName}}">
<img src="{{item.attachment.path}}" alt="">
</div>
<p>{{item.certificatesName}}</p>
</div>
<div class="fileinput-button showUpload">
<div class="upload-sign"> <i class="glyphicon glyphicon-plus"></i></div>
</div>
弹框
2、js
// 上传图片
addImg: function (input) {
$(input).change(function () {
// input:file的对象
var file = $(this)[0];
// 上传成功后图片存放地址
var content = $('#upLoadModal .uploadImgContent');
// 上传并添加图片
UI.getFileBase64(file, '', content, 'image');
})
},
3、上传图片
async upload() {
//先用ajax一起很多 传到控制器 64位码 控制器得到之后循环请求java接口 注意变同步 定义空数组 每一次请求都push数组 然后 json形式 在ajax 请求的那个就可以拿到接口
try {
const ctx= this.ctx;
//const { laList, updateBy } = ctx.request.body;
const laList = ctx.request.body.laList;
let imgList= [];
//循环遍历 base64
laList.forEach((item, index) => {
imgList[index] = {};
imgList[index].type = item.replace(/data:image\/([^;]+).*/i,'$1');
imgList[index].base64 = item.replace(/^data:image\/\w+;base64,/,'');
})
const ids = [];
for(let i = 0; i < imgList.length; i++ ) {
const form =new FormData();
const { type, base64 } = imgList[i];
var dataBuffer= new Buffer(base64, 'base64');
form.append('file', dataBuffer, {
//保证图片名字不一样
filename:Date.parse(new Date())+ `.${type}`,
contentType:`image/${type}`,
konwnLength: dataBuffer.length
})
// form.append('updateBy', updateBy)
// 注意此处必须返回一个 promise
ids[i] = await this.ctx.service.upload.upload(form);
}
await Promise.all(ids).then((allData) => {
//返回的也是数组
ctx.body = allData[0].data;
}).catch((err) => {
console.log(err);
})
} catch (err) {
this.ctx.logger.error(err);
const { serviceurl } = this.app.config.url;
this.ctx.redirect(serviceurl + '/404');
}
}