js 讀取文件

時間 2020-06-08

原文原文鏈接

讀取文本文件javascript

    讀取文本文件：
    <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>

讀取二進制文件html

    讀取文本文件：
    <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>

預覽圖片html5

預覽圖片：
        <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>

讀取圖片並展現java

<!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 路徑並使用app

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。