JavaScript html5利用文件阅读器实现上传功能

本文实例为大家分享了H5利用文件阅读器上传文件的具体代码，供大家参考，具体内容如下

1.超文本标记语言部分

氘文件上传演练/h2 div id='result '！-这里用来显示读取结果-div id=' in result ' div id=' InMiGs '/div div id=' IMginfo '/div/div/div输入类型='text' id='txtImgSrc' /！-显示图片信息-输入类型='按钮' id=' BTN删除'/按钮id=' btnBrowse ' onClick=' onFile()' Browse./按钮输入类型='file' id='file_input'/2 .射流研究…部分

脚本类型=' text/JavaScript ' var result=document。getelementbyid(' result ')；var输入=文档。getelementbyid(' file _ input ')；结果中的变量=文档。getelementbyid(' in result ')；文件阅读器的类型===' undefined '){结果。innerhtml='抱歉，你的浏览器不支持文件阅读器'；input.setAttribute('disabled '，' disabled ')；} else { input。addeventlistener(' change '，readFile，false)；}函数onFile(){ document。getelementbyid(' file _ input ').单击();//打开输入类型='file' id='file_input'/}函数read file(){ var file=this。文件[0]；var fsize=ParSeint((文件。大小)/1024)；//计算图片大小，默认是b，转换成KB if(！/image\/\w /.test(file.type)){ alert('请确保文件为图像类型');返回false } var reader=new FileReader()；reader.readAsDataURL(文件);读者。onload=function(e){//alert(this。结果)；免疫系统。innerHTMl=' img src=' http : '这。结果' ' alt=' width=' 198 px ' height=' 250 px ' id=' img '/'；//显示图片var arr=输入。价值。拆分(' \ \ ')；//分割图片路径文件。getelementbyid(' result ')。风格。display=' block文件。getelementbyid(' txtImgSrc ').值=arr[arr。长度-1]；//取数组最后部分-图片名字。jpg文档。getelementbyid(' imgInfo ').innerHTML=arr[arr。length-1 ']br/(' fsize ' kb ')；//显示图片名字加图片大小} }/脚本3 .图片测试

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。