文件上传通常会涉及到FileReader对象,主流的chrome FireFox edge 都支持FileReader对象,ie浏览器中ie10以下不支持FileReader对象,ie10以下文件上传的解决办法是用flash
一、FileReader对象实现文件上传并预览(图片)
文件上传主要是拿到用户上传的本地文件并提交给后台,图片上传是文件上传特殊的一类,经常需要实现图片的预览,预览图片用两种方法,方法一:前端获取图片的base64再渲染页面,方法二:前端提交数据到后台,后台返回一个图片链接,前端再把图片链接渲染到界面。方法二更简单,这里演示方法一。
html代码
<input type="file" id="file_obj" onchange="fileChange(this)" accept="image/jpeg" style="display: none;" />
<button type="button" id="up_btn">点击上传文件</button>
<img src="" width="200" height="200" id="w_img">
JS代码
//jQuery =>记得引入jquery文件
$("#up_btn").click(function() {
$("#file_obj").click()
})
// 文件上传
function fileChange(obj) {
let file = obj.files[0]; //获取到文件
if (file) {
/* 发送给服务器 */
$.ajax({
type: "POST",
'Content-Type': 'application/json',
url: init.baseUrl + "/article/uploadImage",
data: {
file: file
},
success: function(data) {
// do something
}
});
/* 预览图片 => 如果上传文件 此步骤省略 */
let fr = new FileReader(); //创建FileReader 对象
fr.readAsDataURL(file)
fr.onload = function(e) {
let res = e.target.result //获取图片base64
$("#w_img").attr("src", res)
}
}
}
二、ie8及以下实现文件上传和预览
ie10以下不支持fileReader对象,同时也不支持FormData对象的append方法,
图片上传参考:https://github.com/zilan93/uploadImg/blob/master/uploadImg.js