博客已迁移到CSDN《https://blog.csdn.net/qq_33375499》
点击文件选择框,选择图片文件,通过FileReader对象,读取图片文件中的内容,存放于result中,具体代码如下
1 <input type="file" onchange="fileReader(this)" /> 2 <div id="d"> 3 <img id="img" src="" /> 4 </div>
1 <script type="text/javascript"> 2 function fileReader(obj){ 3 var file = obj.files; 4 var img = document.getElementById("img"); 5 var reader = new FileReader();// 操作图片 6 if(/image/.test(file[0].type)){ 7 reader.readAsDataURL(file[0]); 8 }else { 9 alert('请选择图片!'); 10 obj.value = ""; 11 return; 12 } 13 // 图片加载错误 14 reader.onerror = function(){ 15 document.write("图片加载错误"); 16 } 17 // 图片加载完成 18 reader.onload = function(){ 19 img.src = reader.result; 20 } 21 } 22 </script>