下面为大家介绍一种js图片上传转base64编码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片上传转base64显示</title> <script src="http://www.xiaoshu168.com/js/public/jquery.min.js"></script> </head> <body> <input value="sdgsdg" id="demo_input" type="file"> <textarea id="result" rows="30" cols="300"></textarea> <p id="img_area"></p> <script> window.onload = function() { var input = document.getElementById("demo_input"); var result = document.getElementById("result"); var img_area = document.getElementById("img_area"); if (typeof(FileReader) === 'undefined') { result.innerHTML = "抱歉,你的浏览器不支持 FileReader,请使用现代浏览器操作!"; input.setAttribute('disabled','disabled'); } else { input.addEventListener('change', readFile, false); } } function readFile() { var file = document.getElementById("demo_input").files[0]; // console.log(fiol); //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件 if (!/image\/\w+/.test(file.type)) { alert("请确保文件为图像类型"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); console.log(this.result); reader.onload = function(e) { result.innerHTML = '<img src="' + this.result + '" alt=""/>'; img_area.innerHTML = '<div class="sitetip">图片img标签展示</div><img src="' + this.result + '" alt=""/>'; } } </script> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。