HTML5 Programming Practice Part 3 - Image Text (txt) Drag and Drop Preview Implementation Code

黄舟

Release： 2017-03-30 13:33:28

Original

1463 people have browsed it

The main knowledge used in this article

Source code

<!DOCTYPE html><html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML5文件拖拽预览Demo</title>
    <style type="text/css">
        h1{
            padding:0px;
            margin:0px;
        }
        p#show{
            border: 1px solid #ccc; 
            width: 400px; 
            height: 300px;
            display: -moz-box;
            display: -webkit-box;
            -moz-box-align: center;
            -webkit-box-align: center;
            -moz-box-pack: center;
            -webkit-box-pack: center;
            resize:both;
            overflow:auto;
        }
        p[id^=show]:hover{
            border: 1px solid #333; 
        }
        p#main{
            width:100%;
        }
        p#successLabel        {
            color:Red;
        }
        p#content        {
            display:none;
        }
    </style>
    <script type="text/javascript">
        function init() 
        {            var dest = document.getElementById("show");
            dest.addEventListener("dragover", function(ev) 
            {
                ev.stopPropagation();
                ev.preventDefault();
            }, false);
        
            dest.addEventListener("dragend", function(ev) 
            {
                ev.stopPropagation();
                ev.preventDefault();
            }, false);
        
            dest.addEventListener("drop", function (ev) {
                ev.stopPropagation();
                ev.preventDefault();        
                var file = ev.dataTransfer.files[0];                
                var reader = new FileReader();        
                if (file.type.substr(0, 5) == "image") {
                    reader.onload = function (event) {
                        dest.style.background = &#39;url(&#39; + event.target.result + &#39;) no-repeat center&#39;;
                        dest.innerHTML = "";
                    };
                    reader.readAsDataURL(file);
                }                else if (file.type.substr(0, 4) == "text") {
        
                    reader.readAsText(file);
                    reader.onload = function (f) {
                        dest.innerHTML = "<pre class="brush:php;toolbar:false">" + this.result + "

"; dest.style.background = "white"; } } else { dest.innerHTML = "暂不支持此类文件的预览"; dest.style.background = "white"; } }, false); } //设置页面属性，不执行默认处理（拒绝被拖放） document.ondragover = function(e){e.preventDefault();}; document.ondrop = function(e){e.preventDefault();} window.onload=init;

HTML5文件拖拽预览Demo

文件预览区，仅限图片和txt文件

Copy after login

Main code analysis

I won’t go into the style part, it’s very simple

Dragover, dragend, and drop are three events related to dragging

Dragover indicates that the dragged element is moving within the scope of this element

dragend Indicates the end of the drag-and-drop operation

Drop indicates that other elements have been dragged and dropped into this element

In the code, we first listen to these events respectively and cancel the browser's default behavior, and then use File and FileReader in HTML5 to determine whether to read the dragged file

If the file is an image, use the readAsDataURL method of FileReader to read the image as a DataURL string and save it. into memory and displayed in p.

If the file is txt text, use FileReader's readAsText method to read the file into text (default is UTF-8 format), put it into memory, and then display it in p. p in.

The above is the detailed content of HTML5 Programming Practice Part 3 - Image Text (txt) Drag and Drop Preview Implementation Code. For more information, please follow other related articles on the PHP Chinese website!