jquery上传图片预览并显示文件名，大小，格式信息

1.dom元素

<div class="pic_box">
	<img src="img/head.jpeg" id="pic" />
</div>
<table class="tables">
	<thead>
		<tr>
			<td>文件名</td>
			<td>大小</td>
			<td>类型</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td id="name"></td>
			<td id="size"></td>
			<td id="type"></td>
		</tr>
	</tbody>
</table>
<input type="file" class="pic_upload" id="upload" />
		

2.js编写

$(".pic_box").click(function(){
	$("#upload").click();
});
			
$("#upload").on("change", function() {
    var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
	if (objUrl) {
	    $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
	    var items = $(this)[0].files;
	    var fileName = items[0].name; // 获得文件名
	    var fileSize = items[0].size; // 获得文件大小 
	    var fileType = items[0].type; // 获得文件类型
	    $("#name").html(fileName);
	    $("#size").html(fileSize+"bytes");
	        $("#type").html(fileType);
	}
});
	        
function getObjectURL(file) {  //获得url
	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 ;
}

3.效果展示