jquery实现图片的本地预览
程序员文章站
2022-06-21 14:46:35
...
jquery实现图片的本地预览
base64、blob和file数据类型相互转换并使用FormData模拟表单上传
移动端H5项目,需要实现调用手机拍照,并将图片压缩上传功能
// blob 方式实现本地图片预览
$(".sf1").change(function (e) {
// blob 方式实现本地图片预览
var src = ''
if(this.files[0]) {
src = window.URL.createObjectURL(this.files[0]);
$('#img').attr('src', src)
} else {
return false;
}
});
// base64 为方式实现本地预览 data:image/jpeg;base64
$(".sf1").change(function (e) {
uploadImg($('#img')[0],e.target)
});
function uploadImg(element, tag) {
var file = tag.files[0];
var imgSrc;
if (!/image\/\w+/.test(file.type)) {
alert("请选择图片!");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(this.result);
imgSrc = this.result;
$('#img').attr('src', imgSrc)
};
}
上一篇: python 圣诞树、九九乘法表
下一篇: django批量导入数据