此功能主要借助H5提供的新标签和新接口:
input type=file new FormData
调用系统默认的相机、相册、摄像机、录音功能
- function readFile(input){
- if(typeof FileReader == "undefined") {
- alert("您的浏览器不支持html5的FileReader接口,请更换浏览器")
- return
- }
- //这里是获取单张图片,如若获取多张,则为this.files
- let fl = input.files[0]
- //此处还可以获取文件类型和大小
- let type = fl.type.split("/")[0]
- if(type !== "image"){
- alert("请上传图片")
- return
- }
- let size = Math.round(fl.size/1024/1024)
- if(size > 5){
- alert("图片大小不得超过5M")
- return
- }
- //初始化一个文件读取对象
- let fr = new FileReader()
- fr.onload = function(e){
- //在这里做你想做的事情
- $("img").attr("src", e.target.result)
- }
- fr.readAsDataURL(fl)
- }
- $("input").on("change", function(){
- //调用上述函数
- readFile(this)
- })
FileReader对象介绍
readAsDataURL():将文件读取为base64的格式,作为图片的src
result属性: 将读取的数据保存在result中
progress事件:定时触发,可以获取当前已上传文件的大小,如进度条
load事件: 文件上传时触发
loadend事件: 文件上传完成时触发,不论文件上传是否成功都将触发
具体可参阅MDN上关于[FileReader的解释]
- fr.onloadstart = function() {
- console.log("start")
- }
- fr.onprogress = function(e) {
- let tip = '已完成' + Math.round(e.loaded / e.total * 100) + '%'$(".file-upload").find(".progress").text(tip) console.log("uploading") //文件较大时会出现多个uploading
- }
- fr.onabort = function() {
- console.log("cancel") //取消上传功能
- }
- fr.onerror = function() {
- console.log("error")
- }
- fr.onload = function() {
- console.log("complete")
- }
此处上传功能的实现依赖于FormData, FormData是在XMLHttpRequest2级定义的,是为序列化表单以及创建与表单格式相同相同的数据提供便利。以下是其基本的使用方法:
构造函数
创建一个FormData对象实例:
- var fd = new FormData();
添加数据
- fd.append("file", fl)
- fd.append("fileName", fl["name"])
向FormData中添加数据主要用到其append方法,当然还有其他方法,如get、getAll、delete、set、has,具体介绍见[FormData详解]
上传数据
- $.ajax({
- type: "post",
- data: JSON.stringfy(fd),
- url: "api/upload",
- success: function(res){/* do something*/}
- })
备注:如果你单纯的查看FormData对象的实例fd,那么你是查看不了的,直观感觉是一个空对象,你需要使用get或getAll方法查看
来源: https://www.2cto.com/kf/201711/700793.html