H5で画像ドラッグ＆ドロップアップロードプレビューコンポーネントを作成する方法-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

H5で画像ドラッグ＆ドロップアップロードプレビューコンポーネントを作成する方法

php中世界最好的语言

Mar 12, 2018 am 09:43 AM

html5 アップロードプレビュー

今回は、H5 でドラッグアンドドロップ画像アップロードプレビューコンポーネントを作成する方法を説明します。H5 で画像ドラッグアンドドロップアップロードプレビューコンポーネントを作成するための注意事項は何ですか。見てみましょう。

H5 のドラッグイベントは次のとおりです:

[ - ] DragDrop: ドラッグアンドドロップが完了します。つまり、マウスがオブジェクトをドラッグアンドドロップ領域にドラッグし、放します。
[ - ] DragEnter: エントリをドラッグアンドドロップします。つまり、マウスでオブジェクトをドラッグアンドドロップ領域にドラッグアンドドロップします。
[-] DragLeave: ドラッグアンドドロップ領域から離れます。
[ - ] DragOver: ドラッグアンドドロップオブジェクトはドラッグアンドドロップ領域内で一時停止され、ドラッグアンドドロップ領域内で移動するときに複数回トリガーされます。

1. ファイルをドラッグアンドドロップしてファイル情報を取得する

例

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .example {                padding: 10px;                border: 1px solid #ccc;
            }            
            #drop_zone {                border: 2px dashed #bbb;                -moz-border-radius: 5px;                -webkit-border-radius: 5px;                border-radius: 5px;                padding: 25px;                text-align: center;                font: 20pt bold 'Vollkorn';                color: #bbb;
            }        </style>
    </head>
    <body>
        <div class="example">
            <div id="drop_zone">将文件拖放到此处</div>
            <output id="list"></output>
        </div>
        <script>
            function handleFileSelect(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                var files = evt.dataTransfer.files;//获取文件集
                var output = [];                for(var i = 0, f; f = files[i]; i++) {
                    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                        f.size, ' bytes, last modified: ',
                        f.lastModifiedDate.toLocaleDateString(), '</li>');
                }                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
            }            function handleDragOver(evt) {
                evt.stopPropagation();
                evt.preventDefault();
                evt.dataTransfer.dropEffect = 'copy';
            }            var dropZone = document.getElementById('drop_zone');
            dropZone.addEventListener('dragover', handleDragOver, false);
            dropZone.addEventListener('drop', handleFileSelect, false);            //body中阻止 拖拽事件防止拖拽错误
            document.body.addEventListener('dragover', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false;
            }, false);            document.body.addEventListener('drop', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false; 
            }, false);        </script>
    </body> </html>

ログイン後にコピー

2. ファイルサイズとファイル形式を制限する

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .example {                padding: 10px;                border: 1px solid #ccc;
            }            
            #drop_zone {                border: 2px dashed #bbb;                -moz-border-radius: 5px;                -webkit-border-radius: 5px;                border-radius: 5px;                padding: 25px;                text-align: center;                font: 20pt bold 'Vollkorn';                color: #bbb;
            }        </style>
    </head>
    <body>
        <div class="example">
            <div id="drop_zone">将文件拖放到此处</div>
            <output id="list"></output>
        </div>
        <script>
            function handleFileSelect(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                var files = evt.dataTransfer.files;//获取文件集
                var output = [];                for(var i = 0, f; f = files[i]; i++) {                      if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
                            output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                            f.size, ' bytes, last modified: ',
                            f.lastModifiedDate.toLocaleDateString(), '</li>');
                    }
                }                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
            }            function handleDragOver(evt) {
                evt.stopPropagation();
                evt.preventDefault();
                evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
            }            var dropZone = document.getElementById('drop_zone');
            dropZone.addEventListener('dragover', handleDragOver, false);
            dropZone.addEventListener('drop', handleFileSelect, false);            //body中阻止 拖拽事件防止拖拽错误
            document.body.addEventListener('dragover', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false;
            }, false);            document.body.addEventListener('drop', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false; 
            }, false);        </script>
    </body> </html>

ログイン後にコピー

3. サムネイルと動的追加および削除効果を表示する

例

<!doctype html><html>
    <head>
        <meta charset="UTF-8" />
        <title>简易上传预览</title> 
        <style type="text/css">
            #drop_zone {                display: block;                border: 2px dashed #BBB;                padding: 25px 5px;                text-align: center;                font-size: 20pt;                color: #BBB;                border-radius: 5px;
            }            
            #drop_zone.hovering {                -webkit-box-shadow: inset 0px 0px 50px #BBB;                -moz-box-shadow: inset 0px 0px 50px #BBB;                -o-box-shadow: inset 0px 0px 50px #BBB;                box-shadow: inset 0px 0px 50px #BBB;
            }            
            #file-upload-box {                margin: 40px 25px;                padding: 10px;                border: 1px solid #BBB;
            }            
            #description:first-line {                margin-left: 42px;
            }            
            #output_area {                text-align: center;                display: flex;                flex-wrap: wrap;                align-content: space-between;                position: absolute;                left: 0;                right: 0;                top: 106px;                overflow: auto;                bottom: 0;
            }            
            #file-upload-box {                position: absolute;                top: 45px;                bottom: 45px;                left: 20px;                right: 20px;                background-color: #fff;                overflow: auto;
            }            
            .upload-img-itme {                color: #333;                width: 170px;                margin: 10px;                color: #333;                flex: 1;
            }            
            .upload-img-itme a.rimg-name {                overflow: hidden;                text-overflow: ellipsis;                white-space: nowrap;                padding: 5px;                display: block;
            }            
            .d-image {                box-shadow: 0 0 10px #bbb;                border-radius: 20px;                overflow: hidden;                width: 170px;                height: 170px;                display: inline-block;                z-index: 344;                background-color: #cecece;                position: relative;                transition: all 1s;                -moz-transition: all 1s;                -webkit-transition: all 1s;                -o-transition: all 1s;                cursor: pointer;
            }            
            .d-image:hover:after {                display: block;
            }            
            .d-image:after {                content: "×";                font-size: 44px;                text-align: center;                width: 50%;                margin: auto;                position: absolute;                top: 50%;                display: none;                left: 50%;                -webkit-transform: translate(-50%, -50%);                -ms-transform: translate(-50%, -50%);                transform: translate(-50%, -50%);
            }            
            .d-image:hover> img {                -webkit-filter: blur(5px);                -moz-filter: blur(5px);                -ms-filter: blur(5px);                filter: blur(5px);
            }        </style>
    </head>

ログイン後にコピー

eeこの記事の事例を読んだ後にそれを実行してください。さらに興味深い方法については、php 中国語 Web サイトの他の関連記事に注目してください。