jquery html5 file 上传图片显示图片

3 篇文章 0 订阅

    最近做了一个小例子,在上传用户图像时,如何在上传图片时显示图片。在网上找了很多资料也未能如愿,如是,就用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);



评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值