H5利用FileReader上传图片

来源：互联网发布：淘宝网官方网站登入编辑：程序博客网时间：2024/06/02 22:50

1. Html部分

<h2>文件上传演练</h2>    <div id="result">       <!-- 这里用来显示读取结果 -->       <div id="inResult">        <div id="inImgs"></div>       <div id="imgInfo"></div>      </div>    </div>        <input type="text" id="txtImgSrc" /><!--显示图片信息-->    <input type="button" id="btnRemove" />    <button id="btnBrowse" onClick="onFile()">Browse...</button>    <input type="file" id="file_input" />

2. JS部分

<script type="text/javascript">    var result = document.getElementById("result");    var input = document.getElementById("file_input");var inResult = document.getElementById('inResult');        if(typeof FileReader === 'undefined'){        result.innerHTML = "抱歉，你的浏览器不支持 FileReader";        input.setAttribute('disabled','disabled');    }else{        input.addEventListener('change',readFile,false);    }   function onFile(){   document.getElementById('file_input').click(); //打开<input type="file" id="file_input" />   }                                function readFile(){        var file = this.files[0];var fsize = parseInt((file.size)/1024); //计算图片大小，默认是B，转换成KB        if(!/image\/\w+/.test(file.type)){            alert("请确保文件为图像类型");            return false;        }        var reader = new FileReader();        reader.readAsDataURL(file);                reader.onload = function(e){            //alert(this.result);            inImgs.innerHTML = '<img src="'+this.result+'" alt="" width="198px" height="250px" id="img"/>'; //显示图片var arr = input.value.split('\\'); //分割图片路径document.getElementById('result').style.display="block";document.getElementById('txtImgSrc').value = arr[arr.length-1]; //取数组最后部分 - 图片名字.jpgdocument.getElementById('imgInfo').innerHTML = arr[arr.length-1]+"<br/>("+fsize+"kb)"; //显示图片名字加图片大小        }    }</script>

3.图片测试

0 0