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

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

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5の理解：意味と重要性May 11, 2025 am 12:19 AM

H5はHTML5、HTMLの5番目のバージョンです。 HTML5は、Webページの表現力と相互作用を向上させ、セマンティックタグ、マルチメディアサポート、オフラインストレージ、キャンバス描画などの新しい機能を導入し、Webテクノロジーの開発を促進します。

H5：アクセシビリティとWeb標準のコンプライアンスMay 10, 2025 am 12:21 AM

ネットワーク標準へのアクセシビリティとコンプライアンスは、Webサイトにとって不可欠です。 1）アクセシビリティは、すべてのユーザーがウェブサイトに平等にアクセスできるようにします。2）ネットワーク標準は、ウェブサイトのアクセシビリティと一貫性を改善するために続きます。3）アクセシビリティには、セマンティックHTML、キーボードナビゲーション、色コントラスト、代替テキストの使用が必要です。

HTMLのH5タグは何ですか？May 09, 2025 am 12:11 AM

HTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1）H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2）CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3）H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。

H5コード：Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造：読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1）コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2）FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3）レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

H5対古いHTMLバージョン：比較May 06, 2025 am 12:09 AM

HTML5（H5）以降のバージョンのHTMLの主な違いには、次のものが含まれます。1）H5はセマンティックタグを導入し、2）マルチメディアコンテンツをサポートし、3）オフラインストレージ機能を提供します。 H5は、新しいタグやタグなどのAPIを介してWebページの機能と表現力を高め、ユーザーエクスペリエンスやSEO効果を改善しますが、互換性の問題に注意を払う必要があります。

H5対HTML5：用語と関係を明確にするMay 05, 2025 am 12:02 AM

H5とHTML5の違いは次のとおりです。1）HTML5は、構造とコンテンツを定義するWebページ標準です。 2）H5は、迅速な開発とマーケティングに適したHTML5に基づくモバイルWebアプリケーションです。

HTML5機能：H5のコアMay 04, 2025 am 12:05 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、フォームエンハンスメント、オフラインストレージ、ローカルストレージが含まれます。 1。コードの読みやすさやSEO効果を改善するなどのセマンティックタグ。 2.マルチメディアサポートは、メディアコンテンツを埋め込むプロセスとタグを簡素化します。 3.フォームエンハンスメント新しい入力タイプと検証プロパティを導入し、フォーム開発を簡素化します。 4.オフラインストレージとローカルストレージは、ApplicationCacheとLocalStorageを通じてWebページのパフォーマンスとユーザーエクスペリエンスを改善します。

See all articles