検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 プログラミング実践パート 3 - 画像テキスト (txt) ドラッグ アンド ドロップ プレビュー実装コード

HTML5 プログラミング実践パート 3 - 画像テキスト (txt) ドラッグ アンド ドロップ プレビュー実装コード

黄舟
黄舟オリジナル
2017-03-30 13:33:281475ブラウズ

この記事で使用する主な知識

HTML5のFileインターフェースとFileReaderインターフェース

ソースコード

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

メインコード分析

とても簡単なのでスタイルの部分には触れません

Dragover、dragend、dropは3つのドラッグ関連のイベ​​ントです

Dragoverとは、ドラッグアンドドロップされた要素が内部で移動していることを意味しますこの要素のスコープ

Dragend はドラッグ アンド ドロップ操作の終了を示します

Drop は他の要素がこの要素にドラッグ アンド ドロップされたことを示します

コードはまずこれらのイベントをそれぞれリッスンし、ブラウザのデフォルト 動作をキャンセルします , 次に、HTML5 で File と FileReader を使用します ドラッグしたファイルを読み取るかどうかを決定します

ファイルが画像の場合は、FileReader の readAsDataURL メソッドを使用して、画像を DataURLstring として読み取り、

に表示します。ファイルが txt テキストの場合は、それを使用します。FileReader の readAsText メソッドを使用してファイルをテキストとして読み取り (デフォルトは UTF-8 形式)、メモリに格納して、p

に表示します。

以上がHTML5 プログラミング実践パート 3 - 画像テキスト (txt) ドラッグ アンド ドロップ プレビュー実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 プログラミング実践パート 2 - アニメーションを使用して画像コードのケースを切り替える次の記事：HTML5 プログラミング実践パート 2 - アニメーションを使用して画像コードのケースを切り替える

関連記事

続きを見る