上传图片获取base64编码、本地预览
2024-09-01 09:42:14
一、读取文件的对象 — new FileReader()
上传图片接口参数有图片base64编码(数组, imgBase64List ),主要用到 读取文件的对象 【 new FileReader() 】
//获取文件
var file = $("#imgForm").find("input")[0].files[0]; //创建读取文件的对象
var reader = new FileReader(); //创建文件读取相关的变量
var imgFile; //为文件读取成功设置事件
reader.onload=function(e) {
alert('文件读取完成');
imgFile = e.target.result;
console.log(imgFile);
$("#imgContent").attr('src', imgFile); // 可以直接显示图片
}; //正式读取文件
reader.readAsDataURL(file);
二、我的实例
1、页面上放上传按钮和图片预览区
<div class="row">
<div class="col-md-6">
<form name="form" id="formData">
<strong>上传凭证:</strong>
<input type="file" name="photo" id="photo" style="display:none;">
<button type="button" class="btn btn-primary" ng-click="fileClick();">点击上传</button>
</form>
</div>
</div><br>
<div class="row" id="uploadPreview"> </div>
2、js实现
/*订单,上传凭证*/
var imgBase64Lists = []; // imgBase64List 数组 // 打开上传凭证模态框
$scope.orderUploadModel = function ($index) {
$scope.modalTitleShowSta = 8;
$('#uploadPreview').empty('');
imgBase64Lists = [];
$scope.picUpload = $scope.orderInfoList[$index]; //当前订单信息
$("#orderInfoDetailModel").modal("show");
}; // 模拟触发点击 隐藏的[type=file]按钮
$scope.fileClick = function () {
$('#photo').click();
}; // 每次选择图片都触发base64
$('#photo').change(function () {
dealWithPic('uploadPreview','photo');
}); function dealWithPic(preview,photo) { // 预览框id , 上传按钮id
var file = document.getElementById(photo).files[0]; //获取文件
if (file) {
var reader = new FileReader(); //创建读取文件的对象
reader.onload = function(evt) {
$('#'+preview).append('<img src="' + evt.target.result + '" style="width: 200px;height: 200px;margin: 10px;"/>');
// imgBase64Lists.push(reader.result);
imgBase64Lists.push((reader.result).split(',')[1]);
};
reader.readAsDataURL(file);
} else {
alert('上传失败,请重新上传!');
}
}
3、效果图
点击上传图片:
4、查看图片的 base64 编码
target 是当前图片的信息:
确定上传之后,可以看到传递过去的参数 imgBase64List(我上传了3张):
可以上网找在线的图片转base64的工具,我找到一个(http://imgbase64.duoshitong.com/),把我刚刚上传的图片放进去试了下,base64编码和请求里面的一样。
5、解决 下载接口返回的图片路径,显示“不支持的图片格式”
在 上面4 中我们也看了传过去的 base64 编码,但是貌似后台没有进行处理,是直接拿这个用的,所以就会导致 下载接口返回的图片路径,显示“不支持的图片格式”的问题,后来把 上面2 中 reader.result 截取一下,只传 ‘,’后面的编码,将后台返回的图片路径拼接上域名,在浏览器下载后双击图片展示出来,是我上传的图片,问题就解决了。。。
最新文章
- HTML <;a>; 标签的 target 属性
- java异常处理:建立exception包,建立Bank类,类中有变量double balance表示存款,Bank类的构造方法能增加存款,Bank类中有取款的发方法withDrawal(double dAmount),当取款的数额大于存款时,抛出InsufficientFundsException,取款数额为负数,抛出NagativeFundsException,如new Bank(100),
- Linux 下Shell 脚本几种基本命令替换区别
- hive函数总结
- linux内核分析课程笔记(二)
- cluster集群
- jquery中字符串类型转换成整形的方法
- hdu3095-Eleven puzzle(双向搜索+哈希)
- 了解Sql
- Linux查看内存占用情况
- setting.py
- hibernate框架的简单入门
- IDEA Failed to load dx.jar
- Introduction to Unity UI
- 缓存与数据库一致性之三:缓存穿透、缓存雪崩、key重建方案
- 十四、MVC的WEB框架(Structs2)
- Mina2 udp--zhengli
- js 实现的简易计算器
- B样条基函数的定义及系数的意义
- vmwear导出OVF模板解析(解决ovf导入服务器失败问题,虚拟机版本等)
热门文章
- JAVA中使用递归和尾递归实现1000的阶乘的比较
- java中javamail收发邮件实现方法
- TLS1.3 认证和秘钥建立握手环节的分析
- Visual Studio(Year)编辑器调试在IIS发布的Web程序出现错误的解决
- 基于Java8的日期时间工具类DateTimeFormatter
- springboot Properties加载顺序源码分析
- 软件测试_Loadrunner_性能测试_脚本录制_录制多server请求脚本
- windows10下安装tensorflow2.0-GPU和Cupy(不用搞CUDA+cudnn)
- Lorenzo Von Matterhorn(map的用法)
- queue模块笔记