JS获取input[file]的值并显示在页面的方法

$(document). on( 'change', '.photo-box .file', function () {

//alert($(this).val());

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;

}

var objUrl = getObjectURL( this. files[ 0]);

console. log( "objUrl = " + objUrl);

var html = '<div class="photo-box"><img src="' + objUrl + '" alt=""><div class="photo-btn"><p>删除</p></div></div>';

$( this). parent(). parent(). append( html);

})

代码如图所示，获取到url后再添加到页面写好的模块里面