标签:图片 line span width accept nbsp class lin get
本文的使用场景主要是用户修改头像,选择本地图片后在页面上面显示选择的图片。使用jQuery+js实现。
<input id="head" name="headPortrait" class="btn btn-xm btn-outline btn-primary" style="margin: 0 auto" type="file" value="选择图片" accept="image/png,image/jpeg">
accept可以在前台限制用户可以上传什么类型的文件。
<div id="headImg" style="margin-top: 10px;"></div>
1 $("#head").change(function () { 2 var eImg = $("<img width=‘120px‘ name=‘pic‘ />"); 3 eImg.attr(‘src‘, getObjectURL(this.files[0])); 4 $("#headImg").html(eImg); 6 }) 7 8 //获取URL 9 function getObjectURL(file) { 10 var url = null; 11 if (window.createObjectURL != undefined) { // basic 12 url = window.createObjectURL(file); 13 } else if (window.URL != undefined) { // mozilla(firefox) 14 url = window.URL.createObjectURL(file); 15 } else if (window.webkitURL != undefined) { // webkit or chrome 16 url = window.webkitURL.createObjectURL(file); 17 } 18 return url; 19 }
完事
标签:图片 line span width accept nbsp class lin get
原文地址:http://www.cnblogs.com/gaofei-1/p/7823157.html