HTML5-Programmierpraxis Teil 3 – Bildtext (txt) Drag-and-Drop-Vorschau des Implementierungscodes

黄舟

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

Original

1472 Leute haben es durchsucht

Das in diesem Artikel verwendete Hauptwissen

　HTML5 Datei und FileReaderSchnittstelle

Quellcode

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

Nach dem Login kopieren

Hauptcode-Analyse

Ich werde nicht auf den Stilteil eingehen, Es ist ganz einfach

Dragover, Dragend und Drop sind drei Drag-bezogene Ereignisse

Dragover zeigt an, dass sich das gezogene Element innerhalb des Bereichs dieses Elements bewegt

. > Dragend zeigt das Ende des Drag-and-Drop-Vorgangs an

Drop zeigt an, dass andere Elemente in dieses Element gezogen wurden

Hören Sie sich diese Ereignisse im Code zunächst separat an und brechen Sie das Standardverhalten des Browsers ab und verwenden Sie dann File und FileReader in HTML5, um zu bestimmen, ob die gezogene Datei gelesen werden soll

Wenn es sich bei der Datei um ein Bild handelt, verwenden Sie die Methode readAsDataURL von FileReader Lesen Sie das Bild als DataURLStringSpeichern Sie es im Speicher und zeigen Sie es in p an

Wenn es sich bei der Datei um TXT-Text handelt, verwenden Sie die Methode readAsText von FileReader, um die Datei in Text einzulesen (Standard ist UTF). -8-Format), legen Sie es in den Speicher und dann Gezeigt auf S.

Das obige ist der detaillierte Inhalt vonHTML5-Programmierpraxis Teil 3 – Bildtext (txt) Drag-and-Drop-Vorschau des Implementierungscodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!