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

Rattenking

发布于 2021-01-29 15:58:50

2.7K00

代码可运行

文章被收录于专栏：RattenkingRattenking

运行总次数：0

代码可运行

在线预览

# 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？还有他是怎么转化？看了好几次，一直没搞懂。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017/08/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

php

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

php

登录后参与评论

0 条评论

热度

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐