您的位置:首页 > Web前端 > JQuery

jquery html5 file 上传图片显示图片

2014-12-20 22:46 429 查看
最近做了一个小例子,在上传用户图像时,如何在上传图片时显示图片。在网上找了很多资料也未能如愿,如是,就用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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐