一、读取文件的对象 — 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 截取一下,只传 ‘,’后面的编码,将后台返回的图片路径拼接上域名,在浏览器下载后双击图片展示出来,是我上传的图片,问题就解决了。。。

最新文章

  1. HTML &lt;a&gt; 标签的 target 属性
  2. java异常处理:建立exception包,建立Bank类,类中有变量double balance表示存款,Bank类的构造方法能增加存款,Bank类中有取款的发方法withDrawal(double dAmount),当取款的数额大于存款时,抛出InsufficientFundsException,取款数额为负数,抛出NagativeFundsException,如new Bank(100),
  3. Linux 下Shell 脚本几种基本命令替换区别
  4. hive函数总结
  5. linux内核分析课程笔记(二)
  6. cluster集群
  7. jquery中字符串类型转换成整形的方法
  8. hdu3095-Eleven puzzle(双向搜索+哈希)
  9. 了解Sql
  10. Linux查看内存占用情况
  11. setting.py
  12. hibernate框架的简单入门
  13. IDEA Failed to load dx.jar
  14. Introduction to Unity UI
  15. 缓存与数据库一致性之三:缓存穿透、缓存雪崩、key重建方案
  16. 十四、MVC的WEB框架(Structs2)
  17. Mina2 udp--zhengli
  18. js 实现的简易计算器
  19. B样条基函数的定义及系数的意义
  20. vmwear导出OVF模板解析(解决ovf导入服务器失败问题,虚拟机版本等)

热门文章

  1. JAVA中使用递归和尾递归实现1000的阶乘的比较
  2. java中javamail收发邮件实现方法
  3. TLS1.3 认证和秘钥建立握手环节的分析
  4. Visual Studio(Year)编辑器调试在IIS发布的Web程序出现错误的解决
  5. 基于Java8的日期时间工具类DateTimeFormatter
  6. springboot Properties加载顺序源码分析
  7. 软件测试_Loadrunner_性能测试_脚本录制_录制多server请求脚本
  8. windows10下安装tensorflow2.0-GPU和Cupy(不用搞CUDA+cudnn)
  9. Lorenzo Von Matterhorn(map的用法)
  10. queue模块笔记