HTML5拖放本地資源

乞力馬紮羅的雪CYF發表於2015-09-28
HTML

    我們可以從本地的資源中拖拽一張圖片到網頁中，這在HTML和JS的結合下是比較簡單的。也即是說一張圖片不僅可以在網頁中進行拖動，還可以從電腦上拖動。具體實現如下：
（1）HTML中程式碼實現如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>

        #imgContainer{

            background-color: aqua;
            width: 500px;
            height: 500px;
        }
    </style>

    <script src="app02.js"></script>

</head>
<body>

    <div id="imgContainer"></div>
    <div id="msg"></div>
</body>
</html>

（2）JS中實現如下： 

/**
 * Created by chenyufeng on 15/9/28.
 */

var imgContainer,msgDiv;

window.onload = function(){

    imgContainer = document.getElementById("imgContainer");
    msgDiv = document.getElementById("msg");


    imgContainer.ondragover = function(e){

        e.preventDefault();

    };

    imgContainer.ondrop = function(e){

        e.preventDefault();

        //showObj(e.dataTransfer.files);

        var f = e.dataTransfer.files[0];
        var fileReader = new FileReader();
        fileReader.onload = function(e){

            showObj(e.target);

            imgContainer.innerHTML = "<img src=\""+fileReader.result+"\">"

        };
        fileReader.readAsDataURL(f);
    }


};

function showObj(obj){

    var s = "";
    for(var k in obj){

        s+=k+":"+obj[k]+"<br/>"

    }
    msgDiv.innerHTML = s;
}

（3）效果如下：

.



github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！

相關文章