input标签 type='file' 上传图片问题

html 中

[html] 

​​view plain​​

 ​​copy​​

1. <input class="weui-uploader__input" id="uploaderInput" type="file" accept="image/*" multiple="" onchange='openFile(event)'>

js中

[javascript] 

​​view plain​​

 ​​copy​​

1. var openFile = function (event) {
2. var input = event.target;
3. var reader = new FileReader();
4. reader.onload = function () {
5. var database64 = getBase64Image(reader.result);
6. $.ajax({
7. url: UserAPI.upload_headimg,
8. type: "POST",
9. data: { "": database64 },
10. success: function (data) {
11. var url = data["data"];
12. $("#user_img").attr("src", url);
13. }
14. });
15. 
    
16. };
17. reader.readAsDataURL(input.files[0]);
18. 
    
19. };
20. function getBase64Image(imgElem) {
21. return imgElem.replace(/^data:image\/(jpeg|jpg);base64,/, "");}

html不用多说了，下面来说一下js中的代码

先说一下流程    将图片内容转换为Base64，然后异步传到后台。 （后台是一个带有object 类型参数的 web api 方法）

下面看一下 FileReader 中的方法

FileReader接口的方法

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	终端读取操作

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

FileReader接口的事件

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成，无论成功失败

了解 FileReader 中的方法和事件，那么 js 中的代码也就一目了然了。