文件操作

表单操作中经常需要使用到文件的上传，我们可以使用类型为file的input标签来上传文件，而表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。
HTML5提供了File和FileReader两个主要对象用来对文件进行操作，下面直接上代码：
  <div id="backimg"></div>
    <input type="file" id="file">
    <p id="tag">图片信息</p>

    <script>
        var fileInput = document.getElementById("file");
        var backimg = document.getElementById("backimg");
        var tag = document.getElementById("tag");
        fileInput.addEventListener("change",function () {
            backimg.style.backgroundImage="";//清空背景图像
            if(!fileInput.value){
                tag.innerHTML ="文件2"+ fileString;
                return ;
            }

            var fileString = fileInput.files[0];

            if (fileString.type !== "image/jpeg" && fileString.type !== "image/png" && fileString.type !== "image/gif") {
                alert("不是有效的图片文件!");
                return;
            }
                            
            var reader = new FileReader();
            // 以DataURL的形式读取文件:
            reader.readAsDataURL(fileString);
            reader.onload = function(e) {          //文件读取成功的回调
                tag.innerHTML ="文件名："+fileString.name+"<br></br>"+
                    "文件大小:"+fileString.size+"<br></br>";
                var data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
                backimg.style.backgroundImage = "url(" + data + ")";
            };
        })
    </script>