H5圖檔上傳，拖拽圖檔上傳，裁剪圖檔上傳

H5圖檔上傳

參考：

MDN Web 文檔 ： Using files from web applications

MDN Web 文檔 ：FileReader 對象

一、選擇檔案上傳

單擊檔案表單的 選擇檔案按鈕，選擇圖檔檔案後上傳

html

<!-- 檔案表單 -->
<input type="file" id="input">
           

監聽的事件

change
           

var inputObj = document.getElementById('input');
    inputObj.onchange = function(e) {
        if (this.files.length == )
            return;
        let reader = new FileReader(); //建立一個FileReader對象，進行下一步的操作  
        reader.readAsDataURL(this.files[]); //通過readAsDataURL讀取圖檔  

        reader.onload = function() { //讀取完畢會自動觸發，讀取結果儲存在result中  
            let data = this.result;  
            //data 為base64字元，
            //如："data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB..."
            //下一步将 data 傳給伺服器
            // ...

        }
    }
           

二、裁剪圖檔上傳

使用裁剪工具 （如qq裁剪工具）裁剪圖檔後，在文本表單中 ctrl +v 進行粘貼 就可上傳圖檔

html

<!-- 文本表單 -->
<input type="txt" id="input">
           

監聽的事件

paste
           

var inputObj = document.getElementById('input');
    inputObj.onpaste = function(e) {
        var target = e.clipboardData.items[] && 
                     e.clipboardData.items[].type ||  
                     "";
        if (target.match(/^image\//)) {
            let reader = new FileReader(); 
            //建立一個FileReader對象，進行下一步的操作  
            reader.readAsDataURL(e.clipboardData.files[]); 
            //通過readAsDataURL讀取圖檔  

            let data = this.result;//讀取完畢會自動觸發，讀取結果儲存在result中 
            //data 為base64字元，
            //如："data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB..."
            //下一步将 data 傳給伺服器
            // ...

            }
        }
    }
           

三、拖拽上傳圖檔

在桌面上選中圖檔檔案，拖拽到浏覽器某一個矩形框（前端自己定義）中，進行圖檔上傳

html

<!-- 區域樣式要設定稍微大一點 -->
 <div id="dropPic">
 </div>
           

監聽的事件

ondragover     主要阻止 圖檔拖到浏覽器中 變成 浏覽器顯示圖檔檔案
ondrop
           

var dropPicObj = document.getElementById('dropPic');
    dropPicObj.ondragover = function(e) {
        e.preventDefault();
    };
    dropPicObj.ondrop = function(e) {
        e.preventDefault();
        var target = e.dataTransfer.items[] && 
        e.dataTransfer.items[].type || "";
        if (target.match(/^image\//)) {
            let reader = new FileReader(); 
            //建立一個FileReader對象，進行下一步的操作  
            reader.readAsDataURL(e.dataTransfer.files[]); 
            //通過readAsDataURL讀取圖檔  

            reader.onload = function() {
                let data = this.result;
                //data 為base64字元，
                //如："data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB..."
               //下一步将 data 傳給伺服器
               // ...

            }
        }
    };
           

總結

事件包含着所有與事件有關的資訊

不同的事件對象 所包含的特定資訊也不一樣

在檔案上傳的嘗試過程中，熟悉了 clipboardData 和 dataTransfer 等特定事件屬性

有必要再去熟悉下js的事件對象喽， 可以看看别人的博文總結 JS—事件對象