input多图上传并即时显示的代码

以下代码经过Firefox、Chrome浏览器测试没有问题,其余浏览器未作测试。

HTML代码:

<div id="billList">										
</div>
<div class="uploadBtn">
	<div class="btn">
		<p>点击上传</p>
		<p>票据凭证</p>
	</div>
	<input type="file" id="bill" multiple="multiple" accept=".jpg,.png,.jpeg,.gif" onchange="showPreview(this)"/>
</div>

javascript代码:

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 showPreview(source) {
	var length = source.files.length;
	var fileArr = [];
	for(var i=0;i<length;i++){                 
		fileArr.push(source.files[i]);                
		var objUrl = getObjectURL(source.files[i]);//调用函数调取图片地址                 
		if (objUrl) {                     
			var imgHtml = '<div class="bill"><img src="' + objUrl + '"></div>';                    
			$('#billList').append(imgHtml);                 
		}                            
	}  
}
$(function(){
	 $('.uploadBtn .btn').click(function(){
		$(this).siblings('#bill').click();
	 });
});

根据实际应用情况修改。

关键词: javascript代码

网友留言(0条)

发表评论