html元素中，能夠上傳文件的惟一控件就是啦

值得注意的是：當一個表單裏面包含這個上傳元素的時候，表單的enctype必須指定爲multipart/form-data,method必須指定爲post，瀏覽器纔會認識並正確執行。可是還有一點，瀏覽器只容許用戶點擊<input type="file">來選擇本地文件，用JavaScript對<input type="file">的value賦值是沒有任何效果的。當用戶選擇了上傳某個文件後，JavaScript也沒法得到該文件的真實路徑：
可是有個方法能夠，利用File和FileReader兩個主要對象，能夠得到文件信息並讀取文件。
例子文件：file-upload-demo.html

HTML文件

<form method="post" enctype="multipart/form-data" id="file_upload">
　　<p>圖片預覽：</p>
　　<div id="test-image-preview"></div>
　　<p>
　　　　<input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg">
　　</p>
   <p id="test-file-info"></p>
</form>

CSS

#test-image-preview {
　　border: 1px solid #ccc;
   width: 100%;
   height: 200px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
}

JS

<script src="http://cdn.loveqiao.com/jquery.js"></script>
<script type="text/javascript">
　　var
　　　　fileInput = document.getElementById('test-image-file'),
       info = document.getElementById('test-file-info'),
       preview = document.getElementById('test-image-preview');
       // 監聽change事件:
       fileInput.addEventListener('change', function() {
       　　// 清除背景圖片:
          preview.style.backgroundImage = '';
          // 檢查文件是否選擇:
          if(!fileInput.value) {
               info.innerHTML = '沒有選擇文件';
                   return;
          }                    
          // 獲取File引用:
          var file = fileInput.files[0];
          //判斷文件大小
          var size = file.size;
          if(size >= 1*1024*1024){
                alert('文件大於1兆不行!');
                return false;
          }
          // 獲取File信息:
          info.innerHTML = '文件: ' + file.name + '<br>' +
                           '大小: ' + file.size + '<br>' +
                           '修改: ' + file.lastModifiedDate;
          if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
              alert('不是有效的圖片文件!');
              return;
                    
          // 讀取文件:
          var reader = new FileReader();
                reader.onload = function(e) {
                　　var
                     　　data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...}'            
                     　　preview.style.backgroundImage = 'url(' + data + ')';
               };
                // 以DataURL的形式讀取文件:
                reader.readAsDataURL(file);
                console.log(file);
           });
</script>