出於安全考量，操作系統分配給瀏覽器的權限較低，而單個網頁所擁有對用戶電腦操作的權限就更低了，這是為了防止因用戶的操作不當導致惡意網頁隨意增刪改動用戶本地的文件，所以在前端網頁中所有的文件操作必須全都由用戶來主動操作觸發文件上傳。
用戶觸發文件上傳操作的類型大致有以下幾種常用方法
-
使用input標簽，通過一個type設置為file的輸入框可以選中本地文件
-
通過html5的拖拽方法進行文件上傳
-
通過在編輯框進行文件復制
下面我們就對這幾種不同的上傳方法進行一個詳細的分析，分析不同方法的一個特效和優劣
input上傳
<form>
<input type="file" id="uploadfile" >
</form>接着我們可以通過給這個input綁定一個change事件，當監測到該元素選中文件時我們就獲取當前一個object對象並對其files的屬性值進行操作，具體代碼如下：
var file=document.querySelector("#uploadfile");
file.onchange=function(){
var object=this;
console.log(object.files);
for(var i=0;i<object.files.length;i++){
var url=window.URL.createObjectURL(object.files[i]);
}
} 
此時在控制台中會輸出一個filelist的對象，其中就包含當前選中的多個文件，我們通過這個對象進行屬性訪問即可獲得我們需要的window.file的實例，我們可以通過對這個實例的type，size進行過濾選中我們需要的文件類型和文件大小。
我們接下來可以通過window.URL.createObjectURL這個方法獲取一個window.file實例的路徑從而獲取該文件在用戶電腦中的路徑，這個路徑的寫法和我們常用的不同，它對前端開發人員也是透明的，不能夠直接讀取里面的內容但是計算機可以進行讀取。它的地址指向的是一個blob的本地數據，這個數據可直接給頁面上的img、video、audio等元素設置一個路徑方便用戶在前端頁面上進行預覽操作
H5拖拽
<div class="img-container">
將圖片拖拽至此
</div>他會在頁面中顯示一個框，然后我們可以監聽他的拖拽事件
var file=document.querySelector(".img-container");
file.ondragover=function(){
var object=event.originalEvent.dataTransfer;
console.log(object.files);
for(var i=0;i<object.files.length;i++){
var url=window.URL.createObjectURL(object.files[i]);
}
}我們對這個拖拽事件的原始時間對象進行讀取即可獲得一個類filelist的對象，接下來的操作方法同上
文件粘貼
<div class="img-container" contenteditable="true">
將圖片粘貼至此
</div>如果使用圖片粘貼方法的話，咱們通常需要給這個目標div設置一個contenteditable為true的屬性，因為默認情況下div元素皆是不可編輯的
var file=document.querySelector(".img-container");
file.onpaste=function(){
var object=event.originalEvent.clipboardData;
console.log(object.files);
for(var i=0;i<object.files.length;i++){
var url=window.URL.createObjectURL(object.files[i]);
}
}使用粘貼方法的話，此時待粘貼的數據全部藏在事件的.originalEvent.clipboardData屬性值中，獲取到的也是一個filelist，接下來的操作方法同上
分析
以上幾種是前端獲取用戶本地文件的幾種常用方式，若是將讀取的文件傳輸至服務器則還需要使用表單或是ajax等方法，至於選擇什么方法在前端中選中一個元素這個更大程度上取決於開發者對頁面的交互邏輯的一個取舍，我們根據用戶的使用場景自行選擇最合適和上傳方法即可