画像を選択してサムネイルを表示します(サムネイルを自動生成します)

3023 ワード

先端 javascript dropbox filereader サムネイル

参考:
dropを使ってクリックとドラッグ＆ドロップの選択/ファイルのアップロードを実現します。
以下は完全なコードです.コメントを見てください.


    
    var dropbox, imgUpload;

    dropbox = document.getElementById("dropbox");
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("dragleave", dragleave, false);
    dropbox.addEventListener("drop", drop, false);

    imgUpload = document.getElementById("imgUpload");
    imgUpload.addEventListener("change", readFile, false)

    //     drop  
    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.background = '#666'
    }
    //     drop    
    function dragover(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    //     drop  
    function dragleave(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.background = '#fbfbfb';
    }
    //    drop     /  （    ）
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
        dropbox.style.background = '#fbfbfb';

        var dt = e.dataTransfer;
        var files = dt.files;

        handleFiles(files);
    }
    //           
    function readFile() {
        handleFiles(this.files);
    }
    //         
    function handleFiles(files) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /^image\//;
            //          
            if (!imageType.test(file.type)) {
                continue;
            }
            //   img         
            var img = document.createElement("img");
            preview.appendChild(img);
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (function (aImg) {
                return function (e) {
                    aImg.src = e.target.result;
                };
            })(img);
        }
    }

JavaScript高性能モジュール化ライブラリのLodashフレーム