jquery html5 file 上传图片显示图片 - yjbjingcha

jquery html5 file 上传图片显示图片

    近期做了一个小样例。在上传用户图像时，怎样在上传图片时显示图片。在网上找了非常多资料也未能如愿，如是，就用jquery ,html5,实现了,因为开发是在linux 所以未能在ie下測试。在forefox,chrom下是能够的。

 一、html下的代码是：

     <div  class=\' input_box\'  >
        <span class=\'spac\' >头</span>相：<input class="input_style"  id="\'head_image\'"   name=\'headimage\'   type=\'file\' ><label id="prompt_image">*</label>
      </div>
       <div   style="height:60px; display:none;margin-bottom:10px;padding-left:50px;" id="show_box">
         <img    id="show_img">
      </div>

二、jquery js 的代码：不同浏览器下的路径

	    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 strsrc=getObjectURL(this.files[0]);
$("#show_img").attr("src",strsrc);