文件系统API

来源：互联网发布：eve数据地点出什么编辑：程序博客网时间：2024/06/08 12:22

对于表单里的input：可以直接通过name找到，document.form[0].input_file

主要代码：

var inputFile = document.forms[0].input_file;var files = inputFile.files; //获取文件列表files[i].namefiles[i].lastModifiedDate.toLocaleDateString()(files[i].size/1024).toFixed(2)+"KB"

完整实例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .select-file{            width: 120px;            height: 20px;            border-radius: 3px;            background-color: yellow;        }    </style>    </head><body>    <form>        <input type="file" name="input_file" id="input_file" multiple hidden>        <input type="button" id="btn_select" value="选择文件(可多选)" class="select-file">        <ul id="ul_file">            <!-- <li>                <h3>文件标题1</h3>                <p>文件内容2</p>            </li>-->        </ul>    </form>    <script>            (function(){            /*var inputFile = document.querySelector("#input_file");*/            var inputFile = document.forms[0].input_file;            var btnSelect = document.querySelector("#btn_select");            var ulFile = document.querySelector("#ul_file");            btnSelect.addEventListener("click",function(){                inputFile.click();            });            inputFile.addEventListener("change",function(){                var files = inputFile.files; //获取文件列表                console.log(files);                for(var i = 0; i < files.length; i++){                    var li = document.createElement("li");                    li.innerHTML = "<h3>"+files[i].name+"</h3>"+                                    "<p>"+files[i].lastModifiedDate.toLocaleDateString()+" "+(files[i].size/1024).toFixed(2)+"KB"                                    "</p>";                    ulFile.appendChild(li);                }            });        })();    </script></body></html>

此外，还有readAsDataURL接口：

 <form enctype="multipart/form-data">     <div class="row clearfix w840">          <div class="r">               <input onclick="copyUrl2()" value="复制" name="res7" class="tools_btn06" type="button">               <input onclick="Word.value=''" value="清空" name="res7" class="tools_btn06" type="button">          </div>          <div class="span" style="width:325px">               <a href="javascript:;" class="input-file">                    <input accept="image/*" name="upimage" id="upload_file" type="file" value="点击这里选择选择要转换成Base64的图片">&nbsp;点击这里选择选择要转换成Base64的图片               </a>           </div>    <div class="span" id="update_file_label"></div>     </div>     <div class="row clearfix tc">         <textarea id="base64_output" name="Word" style=" width:820px"></textarea>      </div>      <div class="row clearfix w840">           <div class="span">                 <input value="还原生成的Base64编码为图片：" class="tools_btn02" type="button" onclick="test_base64();">            </div>            <div class="span" style="margin-left:10px">                 <div class="strong red" id="img_size"> </div>            </div>      </div>      <div class="row alert success w840">          <img id="img_prev" src="" style="max-width:100%;border: 1px solid gray;" data-bd-imgshare-binded="1">       </div> </form>  <script type="text/javascript">            function $_(id) {                return document.getElementById(id);            }            function gen_base64() {                $_('base64_output').value = '';                $_('img_size').innerHTML = '';                $_('img_prev').src = '';                var file = $_('upload_file').files[0];                if (!/image\/\w+/.test(file.type)) {                    alert("请确保文件为图像类型");                    return false;                }                r = new FileReader(); //本地预览                r.onload = function() {                    $_('base64_output').value = r.result;                    $_('img_size').innerHTML = "    图片大小：" + Math.round(r.result.length / 1024 * 1000) / 1000 + " KB";                }                r.readAsDataURL(file); //Base64            }            function test_base64() {                $_('img_prev').src = '';                $_('img_prev').src = $_('base64_output').value;            }            window.onload = function() {                if (typeof(FileReader) === 'undefined') {                    alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");                    $_('upload_file').disabled = true;                }            }            document.getElementById("upload_file").onchange = function() {                        document.getElementById("update_file_label").innerHTML = this.value;    gen_base64();};</script>

阅读全文

0 0