图片传前预览

标 签: HTMLjquery

jquery图片上传前预览代码

1.在上传图片前,默认是没有办法看到预览的,这是现在浏览器很头痛的问题,想预览可以用如下js,这个代码是来自网络,他原来的代码是只是看一个,你多选也只能看最后一个,我改了一下,注释起来为他原来的代码。具体找码如下:

<script>	
	$("#infile").change(function(){
		// var objUrl = getObjectURL(this.files[0]) ;
		// console.log("objUrl = "+objUrl) ;
			// if (objUrl) {
			 // $("#img0").attr("src", objUrl) ;
		 // }
        	$(this.files).each(function (index,Obj){
			objUrl = getObjectURL(Obj);
			console.log("objUrl = "+objUrl) ;
			if (objUrl) {
				var html = "<img src='"+objUrl+"'/>";
					$('.img').append(html) ;
				}
			});
	}) ;
	//建立一個可存取到該file的url
	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 ;
		}
</script>

2.html的代码部分如下:

<input type="file" name="file[]" id="infile" />
<div class="img"></div>

Js+JQuery / 评 论 (0) / 热度 (169℃) / 2017-03-06 / 阅读全文  / MaWei