js 读取文件
读取文本文件
读取文本文件： <input type="file" id="file1" accept="*" /> </div> <div> 显示进度： <progress id="pro" value="0"></progress> </div> <div id="result"></div> <script type="text/javascript"> var file1 = document.getElementById('file1'); file1.onchange = function () { var file = file1.files[0]; //读取为二进制 var reader = new FileReader(); reader.readAsText(file,'utf-8'); //reader.readAsBinaryString(file); //显示进度 var pro = document.getElementById('pro'); pro.max = file.size; pro.value = 0; reader.onprogress = function (e) { pro.value = e.loaded; } reader.onload = function () { document.getElementById('result').innerHTML = reader.result; } } </script>
读取二进制文件
读取文本文件： <input type="file" id="file1" accept="*" /> </div> <div> 显示进度： <progress id="pro" value="0"></progress> </div> <div id="result"></div> <script type="text/javascript"> var file1 = document.getElementById('file1'); file1.onchange = function () { var file = file1.files[0]; //读取为二进制 var reader = new FileReader(); reader.readAsText(file,'utf-8'); //reader.readAsBinaryString(file); //显示进度 var pro = document.getElementById('pro'); pro.max = file.size; pro.value = 0; reader.onprogress = function (e) { pro.value = e.loaded; } reader.onload = function () { document.getElementById('result').innerHTML = reader.result; } } </script>
预览图片
预览图片： <input id="images" type="file" multiple accept="image/*" /> <script type="text/javascript"> var imgInput = document.getElementById('images'); imgInput.onchange = function () { //1.获取所有选中文件列表 var fileList = imgInput.files; //2.遍历显示信息 for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; //一次读取文件的文件名，文件类型，文件大小 var div = document.createElement('div'); div.innerHTML = "第" + (i + 1) + "个文件的文件名：" + file.name + ",文件类型：" + file.type + "，文件大小：" + file.size; //添加到 body中 document.body.appendChild(div); } } </script>
读取图片并展示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单的html5 File测试 for pic2base64</title> <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 = this.files[0]; console.log(file); //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件 if(!/image\/\w+/.test(file.type)){ alert("请确保文件为图像类型"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); 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> </head> <body> <input type="file" value="sdgsdg" id="demo_input" /> <textarea id="result" rows=30 cols=300></textarea> <p id="img_area"></p> </body> </html>
读取图片并展示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单的html5 File测试 for pic2base64</title> <body> <p> <label>请选择一个图像文件：</label> <input type="file" id="file_input" /> </p> <div id="result"></div> </body> <script> var result = document.getElementById("result"); var input = document.getElementById("file_input"); if(typeof FileReader==='undefined'){ result.innerHTML = "抱歉，你的浏览器不支持 FileReader"; input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); } function readFile(){ var file = this.files[0]; if(!/image\/\w+/.test(file.type)){ alert("文件必须为图片！"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ result.innerHTML = '<img src="'+this.result+'" alt=""/>' } } </script> </html>
获得blod 路径并使用
<!DOCTYPE html> <html lang="en" > <head> <title>files</title> </head> <body> <img id = 'img1' src="" alt="bukejian"/> <input type="file" id="files" onchange="readFile()" /> <p id="out"></p> </body> <script > function readFile(){ var a = document.createElement('a'); var img2 = document.createElement('img'); var uri = document.getElementById('files').files[0]; var url = window.URL.createObjectURL(uri); a.href=url; url=a.href; alert(url); document.getElementById('img1').src=url; //document.getElementById('out').innerHTML=uri; } </script> </html>
