HTML5拖拽——將本地文件拖拽到網頁中顯示

時間 2019-11-30

標籤 html5 html 本地文件網頁顯示欄目 HTML5 简体版

原文原文鏈接


 HTML5標準中的提供的用於文件輸入輸出(I/O)的對象
 File:                       表明一個文件對象
 FileList:                   表明一個文件列表，類數組對象
 FileReader                  用於從文件中提取內容
 FileWrite                   用於向文件中寫入類容

這些對象須要在 H5的拖拽事件中經過 e.dataTransfer  來訪問和獲取

完成效果以下：

Data URL給了咱們一種很巧妙的將圖片「嵌入」到HTML中的方法。跟傳統的用img標記將服務器上的圖片引用到頁面中的方式不同，在Data URL協議中，圖片被轉換成base64編碼的字符串形式，並存儲在URL中，冠以mime-type。javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            border: 1px solid #aaa;
            padding: 10px;
            margin: 10px;
            width: 1050px;
            min-height: 300px;
        }
    </style>
</head>
<body>
<h3>請拖拽您的頭像到下方區域</h3>
<div id="container">

</div>
<script>
    /*拖拽的目標對象------ document 監聽drop 並防止瀏覽器打開客戶端的圖片*/
    document.ondragover = function (e) {
        e.preventDefault();  //只有在ondragover中阻止默認行爲才能觸發 ondrop 而不是 ondragleave
    };
    document.ondrop = function (e) {
        e.preventDefault();  //阻止 document.ondrop的默認行爲  *** 在新窗口中打開拖進的圖片
    };
    /*拖拽的源對象----- 客戶端的一張圖片 */
    /*拖拽目標對象-----div#container  若圖片釋放在此元素上方，則須要在其中顯示*/
    container.ondragover = function (e) {
        e.preventDefault();
    };
    container.ondrop = function (e) {
        console.log(e.dataTransfer);
//        chrome 此處的顯示有誤
        var list = e.dataTransfer.files;
        for (var i = 0; i < list.length; i++) {
            var f = list[i];
//            console.log(f);
            reader(f);
//            讀取指定文件的內容 做爲「數據URL」
//            reader.readAsDataURL(f);
//            當客戶端文件讀取完成 觸發onload事件
        }
    };
    function reader(f) {
        var reader = new FileReader();
        reader.readAsDataURL(f);
        reader.onload = function () {
//            console.log(reader.result);
            var img = new Image();
            img.src = reader.result;
            container.appendChild(img);

        }
    }
   

</script>
</body>
</html>

遇到的坑以下： CHROME顯示錯誤html