HTML5 文件上传

 1 <input type="file" id="file" multiple>     //multiple可上传多个文件
 2 <input type="button" onclick="showFileName()" value="文件上传">
 3 <script>
 4 function showFileName(){
 5       var file;       //创建file对象
 6       for(var i;i<document.getElementById("file").files.length;i++){
 7           file = document.getElementById(‘file‘).files[i];   //.files
 8           console.log(file.name);
 9        }
10 }
11 </script>

1 var file;
2 file = document.getElementById("file").files[0];
3 file.size;     //当前上传文件的大小
4 file.type;    //当前上传文件的类型

<input type="file" id="file">
<input type=‘button‘ value=‘读取图像‘ onclick=‘readAsDataURL()‘>
<input type=‘button‘ value=读取二进制’ onclick=‘‘>
<input type=‘button value=‘读取文本文件‘ onclick=‘‘>
<div id=‘result‘ name=‘result>
<script>
var result = document.getElementById(‘result‘);
var file = document.getElementById(‘file‘);

function readAsDataURL(){
         var  file = document.getElementById(‘file‘).files[0];
         var reader  = new FileReader();  //创建filereader对象
         reader.readAsDataURL(file);       //读取图片文件
         reader.onload = function(e){
              var resultimg = document.getElementById(‘result‘);
              resultimg.innerHTML = ‘<img src="‘+this.result+‘"+>‘;
         }
}

function readAsText(){
           var file = document.getElementById(‘file‘).files[0];
           var reader = new FileReader();
           reader.readAsText(file);   //读取文本内容
           reader.onload = function(e){
                var resulttxt = document.getElementById(‘result‘);
                resulttxt.innerHTML = this.result;
           }
}
</script>