Table of Contents

The main knowledge used in this article

Source code

Main code analysis

Home

Web Front-end

H5 Tutorial

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

黄舟

Mar 30, 2017 pm 01:33 PM

The main knowledge used in this article

　HTML5 File and FileReaderInterface

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn