下面为大家介绍一种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>
本文由:xiaoshu168 作者:xiaoshu发表,转载请注明来源!