Pratique de programmation HTML5, partie 3 - Texte de l'image (txt) Code d'implémentation de l'aperçu par glisser-déposer

黄舟

Libérer： 2017-03-30 13:33:28

original

1456 Les gens l'ont consulté

Les principales connaissances utilisées dans cet article

　HTML5 File et FileReaderinterface

Code source

<!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文件

Copier après la connexion

Analyse du code principal

Je n'entrerai pas dans la partie style, c'est très simple

Dragover, dragend et drop sont trois événements liés au glisser

Dragover indique que l'élément glissé se déplace dans la portée de cet élément

. > Dragend indique la fin de l'opération glisser-déposer

Drop indique que d'autres éléments ont été glissés et déposés dans cet élément

Dans le code, écoutez d'abord ces événements séparément et annulez le comportement par défaut du navigateur , puis utilisez File et FileReader en HTML5 pour déterminer s'il faut lire le fichier déplacé

Si le fichier est une image, utilisez la méthode readAsDataURL de FileReader pour. lire l'image sous forme de DataURLstring Stocker en mémoire et afficher dans p

Si le fichier est du texte txt, utilisez la méthode readAsText de FileReader pour lire le fichier sous forme de texte (la valeur par défaut est UTF-8 format), mettez-le en mémoire, puis affiché à la p.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!