Last active
January 10, 2018 06:09
-
-
Save mgng/d3f9d6376829319638ef to your computer and use it in GitHub Desktop.
ドラッグドロップした画像をbase64で表示するサンプル
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @charset "utf-8"; | |
| body{ | |
| margin:0; | |
| padding:0; | |
| } | |
| img{ | |
| max-width: 100%; | |
| } | |
| .main{ | |
| margin:0; | |
| padding:1.0em; | |
| width: auto; | |
| text-align:center; | |
| } | |
| .drop_zone{ | |
| width: auto; | |
| height: 5em; | |
| margin: 0; | |
| padding: 1em; | |
| border: 3px dotted #666; | |
| background: #DDD; | |
| color: #444; | |
| } | |
| .display_none{ | |
| display:none; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // required jQuary | |
| // jQuery3からは $.event.props が削除されたのでコメントアウトしないと動かない | |
| // $.event.props.push('dataTransfer'); | |
| ;$(function(){ | |
| 'use strict'; | |
| // 最大ファイルサイズ | |
| var MAX_FILE_SIZE = 1048576 * 2; | |
| // ファイルフォーマットチェック | |
| var checkFileFormat = function( type, size ) { | |
| if ( ! /^image\/(gif|png|jpeg)$/.test( type ) ) { | |
| alert( "画像ファイルではありません。" ); | |
| return false; | |
| } | |
| if ( size > MAX_FILE_SIZE ) { | |
| alert( "ファイルサイズは " + MAX_FILE_SIZE + "bytes 以下にしてください。" ); | |
| return false; | |
| } | |
| return true; | |
| }; | |
| // .main は drag drop 不可にしておく | |
| $(".main").on("dragenter dragover dragleave drop", function(){ | |
| return false; | |
| }); | |
| // #js-id_drop_zone は drag & drop 可能に | |
| $("#js-id_drop_zone") | |
| // ドラッグオーバー時は背景色を変更 | |
| .on( "dragover.js", function(){ | |
| $(this).css({"backgroundColor":"#FFA"}); | |
| return false; | |
| }) | |
| // ドラッグアウト時も背景色を変更 | |
| .on( "dragleave.js", function(){ | |
| $(this).css({"backgroundColor":"#DDD"}); | |
| return false; | |
| }) | |
| // ドロップ時の処理 | |
| .on( "drop.js", function(evt){ | |
| var that = this; | |
| var file = evt.originalEvent.dataTransfer.files[0]; | |
| var data = { | |
| name : file.name, | |
| size : file.size, | |
| type : file.type, | |
| base64 : "" | |
| }; | |
| // フォーマットチェック | |
| if ( ! checkFileFormat( data.type, data.size ) ) { | |
| $(that).css({"backgroundColor":"#DDD"}); | |
| return false; | |
| } | |
| // 読み込み処理 | |
| var fileReader = new FileReader(); | |
| fileReader.readAsDataURL( file ); | |
| fileReader.onload = function( event ) { | |
| data.base64 = this.result.split(',')[1]; // base64取得 | |
| displayImage( data ); | |
| }; | |
| // 読み込み終わりの処理 | |
| fileReader.onloadend = function(){ | |
| $(that).css({"backgroundColor":"#DDD"}); | |
| }; | |
| return false; | |
| }) | |
| // クリック時はfileダイアログオープン | |
| .on( "click.js", function(){ | |
| $("#js-id_file").trigger( "click" ); | |
| }); | |
| // クリックアップロード時は onChange イベント経由で処理 | |
| $("#js-id_file").on( "change.js", function(){ | |
| var files = $(this).prop( "files" ); | |
| // 何もアップロードされなかった場合 | |
| if ( files.length !== 1 ) { | |
| return false; | |
| } | |
| var file = files[0]; | |
| var data = { | |
| name : file.name, | |
| size : file.size, | |
| type : file.type, | |
| base64 : "" | |
| }; | |
| // フォーマットチェック | |
| if ( ! checkFileFormat( data.type, data.size ) ) { | |
| return false; | |
| } | |
| // ファイル読込 | |
| var fileReader = new FileReader(); | |
| fileReader.readAsDataURL( file ); | |
| fileReader.onload = function( event ) { | |
| data.base64 = this.result.split(',')[1]; // base64取得 | |
| displayImage( data ); | |
| }; | |
| // 読み込み終わり時の処理 | |
| fileReader.onloadend = function( event ){ | |
| }; | |
| }); | |
| // 画像表示 | |
| var displayImage = function( data ) { | |
| $("#js-id_result").html("").append( | |
| $("<p />").text( "file name:" + data.name + " , size: " + data.size + "bytes" ), | |
| $("<img />").attr({src: "data:" + data.type + ";base64," + data.base64}) | |
| ); | |
| }; | |
| }); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>drag & drop file and base64 sample</title> | |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="./dd.js"></script> | |
| <link rel="stylesheet" href="./dd.css" /> | |
| </head> | |
| <body> | |
| <div class="main"> | |
| <h1><a href="./">drag & drop file and base64 sample</a></h1> | |
| <form id="id_form_upload" action="javascript:;"> | |
| <p id="js-id_drop_zone" class="drop_zone">ここにファイルをドラッグ & ドロップしてください。</p> | |
| <input type="file" name="file" id="js-id_file" class="display_none" accept="image/gif,image/png,image/jpeg" /> | |
| </form> | |
| <div id="js-id_result"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment