wenku.sharew.cn
实现图片上传前预览效果
浏览:1 | 发布时间:2018-5-5 16:31:45

<input type="file" id="file" onchange="showPreview(this);" />

<img src="" alt="" id="portrait" />

<script>function showPreview(This){

//读取图片内容

var file = This.files[0],

fileType = file.type,

reg = new RegExp(/jpg|jpeg|png|gif/);

//验证是否是一张图片

if(!reg.test(fileType.substr((fileType.lastIndexOf('/')+1)))){

alert('不是一张图片');

return;

}

//获取图片src

if(window.FileReader){

var fr = new FileReader(),

portrait = document.getElementById('portrait');

fr.onload = function(e){

console.log(e);

portrait.src = e.target.result;

}

//将文件读取为DataURL

fr.readAsDataURL(file);

portrait.style.display = 'block';

}

}

</script>


本文来自众享文库,转载请保留注明!

文库内容仅供参考,本站不保证其内容的有效性,如果您需解决具体问题(尤其法律、医学等领域)建议您详细咨询相关领域专业人士。
如果涉及不良内容、个人隐私、版权问题等,敬请举报投诉,本站将立即处理。

友情链接:手写查字典 小说下载查成语 经验文献
© 2017-2018 wenku.sharew.cn 桂ICP备13001205号-1 联系方式

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏