图片上传预览插件制作----URL.createObjectURL()

在线预览

 

# 1.URL.createObjectURL()静态方法

URL.createObjectURL()静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

# 2.兼容性

兼容性查询：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL#Browser_Compatibility

# 插件制作步骤
# 1.创建URL.createObjectURL()的兼容性getObjectURL()方法

 

function getObjectURL(file) {
    var url = null ; 
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}

# 2.创建预览图片的方法preview()

function preview(that,options) {
	//接受files数组列表
	var _file = that.files,str = "";
	console.log(_file);
	//限制上传图片的最大值
	if(_file.length > options.maxLen){
		alert("最多上传" + options.maxLen + "张图片！");
		return;
	}
	
	//循环拼接为字符串
	for(var i = 0; i < _file.length; i++){
		str += "<img src='" + getObjectURL(_file[i]) + "'/>";
	}
	
	//将图片动态添加到图片展示区
	document.getElementById(options.showID).innerHTML = str;
}

# 3.制作外部接口

var upload_preview = window.uploadPreview = function(options){
	var defaults = {
		fileID : options.fileID || "file",
		showID : options.showID || "img-box",
		maxLen : options.maxLen || 3
	}
	//获取页面的input标签
    var file = document.getElementById(defaults.fileID);
    //给input绑定change事件
    file.onchange = function(){
    	var that = this;
    	preview(that,defaults);
    };
}

# 4.完整代码

(function(){
	//获取图片路径方法
	function getObjectURL(file) {
	    var url = null ; 
	    if (window.createObjectURL!=undefined) { // basic
	        url = window.createObjectURL(file) ;
	    } else if (window.URL!=undefined) { // mozilla(firefox)
	        url = window.URL.createObjectURL(file) ;
	    } else if (window.webkitURL!=undefined) { // webkit or chrome
	        url = window.webkitURL.createObjectURL(file) ;
	    }
	    return url ;
	}
	
	function preview(that,options) {
		//接受files数组列表
		var _file = that.files,str = "";
		console.log(_file);
		//限制上传图片的最大值
		if(_file.length > options.maxLen){
			alert("最多上传" + options.maxLen + "张图片！");
			return;
		}
		
		//循环拼接为字符串
		for(var i = 0; i < _file.length; i++){
			str += "<img src='" + getObjectURL(_file[i]) + "'/>";
		}
		
		//将图片动态添加到图片展示区
		document.getElementById(options.showID).innerHTML = str;
	}
	
	
	var upload_preview = window.uploadPreview = function(options){
		var defaults = {
			fileID : options.fileID || "file",
			showID : options.showID || "img-box",
			maxLen : options.maxLen || 3
		}
		//获取页面的input标签
	    var file = document.getElementById(defaults.fileID);
	    //给input绑定change事件
	    file.onchange = function(){
	    	var that = this;
	    	preview(that,defaults);
	    };
	}
})()

说实话URL.createObjectURL()的执行原理真心没理解到，那位大神解释一下最后src读取url对象在那个位置。在浏览器的当前document？还有他是怎么转化？看了好几次，一直没搞懂。

其他

[我的博客，欢迎交流！](http://rattenking.gitee.io/stone/index.html)

[我的CSDN博客，欢迎交流！](https://blog.csdn.net/m0_38082783)

[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)