Drag and Drop to upload file in HTML5

Advertisemen

Here is how you create drag and drop file onto website and upload.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #productImg

            border: 1px solid #000;
            width: 400px;
            height: 400px;
            padding:5px;
        }

        #ImgPreview

            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 400px;
            color: #cccccc;
            font-size: 24px;
            border: 1px dashed #000;
        }

    </style>

</head>

<body>

<div id="productImg">

    <img alt="Drop Image Here" id="ImgPreview">

</div>

<script>

    function fileSelect(evt)

        evt.stopPropagation();

        evt.preventDefault();


        var files = evt.dataTransfer.files[0];

        // 2- ------ start ---

        var fileReader = new FileReader();

        fileReader.onload = function()

            document.getElementById("ImgPreview")

              .src = fileReader.result;

        fileReader.readAsDataURL(files);

        // 2---- ends -----

    }
    function dragOver(evt)

        evt.stopPropagation();

        evt.preventDefault();

        evt.dataTransfer.dropEffect = 'copy';

    }
    // 1 ----- starts ------

    var dropZone = document.getElementById('productImg');

    dropZone.addEventListener('dragover', dragOver, false);

    dropZone.addEventListener('drop', fileSelect, false);

    // 1 ----- ends ------

</script>

</body>

</html>

Here is how it looks -

Advertisemen

Drag and Drop to upload file in HTML5

Tidak ada komentar:

Posting Komentar