html实现即时图片显示,js实现图片上传即时显示效果

前言

h5实训时实现的一个图片上传即时显示的效果，如下图所示

正文

Html代码

头像上传:

js脚本代码

/*显示上传的图片*/

function getObjectURL(file) {

var url = null ;

if (window.createObjectURL!=undefined) {

url = window.createObjectURL(file) ;

} else if (window.URL!=undefined) {

url = window.URL.createObjectURL(file) ;

} else if (window.webkitURL!=undefined) {

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

$('#headPhoto').change(function() {

var eImg=$('#imag');

eImg.attr('src', getObjectURL($(this)[0].files[0]));

$(this).after(eImg);

});

window.URL.createObjectURL方法

创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.

语法:

objectURL = window.URL.createObjectURL(blob);

blob参数是一个File对象或者Blob对象.

objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.

完整代码如下:

图片上传

头像上传:

/*显示上传的图片*/

function getObjectURL(file) {

var url = null ;

if (window.createObjectURL!=undefined) {

url = window.createObjectURL(file) ;

} else if (window.URL!=undefined) {

url = window.URL.createObjectURL(file) ;

} else if (window.webkitURL!=undefined) {

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

$('#headPhoto').change(function() {

var eImg=$('#imag');

eImg.attr('src', getObjectURL($(this)[0].files[0]));

$(this).after(eImg);

});

参考：链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。