js 画像をドラッグ ドロップで ブラウザに表示する

DEMO

DEMO

仕様

option


var defaults = {
  MAX_LNGTH : 1,//一度にドラッグできる数
  MAX_SIZE  : 1,//ファイルサイズの最大値(MB)
  accept    : 'image/gif, image/jpeg, image/png',//拡張子制限
  input    : $el.find('.imagedragdrop_file'),//inputを指定
  output   : $el.next('.dragdroparea_output')//表示する要素を指定
};
defaults.message = {
  _size     : '最大ファイルサイズ('+defaults.MAX_SIZE+'MB)を超えています。',
  _length   : 'ファイルは'+ defaults.MAX_LNGTH + 'つのみ、選択可能です。',
  _type     : '画像ファイル以外のものが含まれています。'
};

outputのinnerHTML

<div class="dragdroparea_output">
  <div class="drop_image_box">
    <div class="drop_image" style="background-image:url('画像のパス');"></div>
    <div class="drop_contents">
      <div class="drop_text">ファイル名</div>
      <div class="drop_button"><button type="button" class="drop_cancel">×</button></div>
    </div>
  </div>
</div>

HTML

<div class="imagedragdrop">
  <div>
    <p class="drag-drop-info">ここにファイルをドロップ</p>
    <p>または</p>
    <p class="drag-drop-buttons">
      <label>
        <span class="imagedragdrop_btn">ファイルを選択</span>
        <input class="imagedragdrop_file" type="file" name="">
      </label>
    </p>
  </div>
</div>
<div class="dragdroparea_output"></div>

JS

;(function($){
  $.fn.jqueryImageDragDrop = function(options){
    "use strict";
    if(this.length == 0) return this;
    // support mutltiple elements
    if(this.length > 1){
      this.each(function(){$(this).jqueryImageDragDrop(options)});
      return this;
    }
    var $el = $(this);
    var defaults = {
      MAX_LNGTH : 1,//一度にドラッグできる数
      MAX_SIZE  : 1,//ファイルサイズの最大値(MB)
      accept    : 'image/gif, image/jpeg, image/png',//拡張子制限
      input    : $el.find('.imagedragdrop_file'),//inputを指定
      output   : $el.next('.dragdroparea_output')//表示する要素を指定
    };
    defaults.message = {
      _size     : '最大ファイルサイズ('+defaults.MAX_SIZE+'MB)を超えています。',
      _length   : 'ファイルは'+ defaults.MAX_LNGTH + 'つのみ、選択可能です。',
      _type     : '画像ファイル以外のものが含まれています。'
    };
    var o = $.extend(defaults, options);
    var $input  = o.input;
    var $output = o.output;
    function init(){
      if (o.MAX_LNGTH > 1) {
        $input.attr('multiple','multiple');
      } else {
        $input.removeAttr('multiple');
      }
      $input.attr('accept',o.accept);
    }
    function jsFilesValidation(files,success){
      var result = true;
      if (files.length > o.MAX_LNGTH) {
        result = false;
        return function(){
          alert(o.message._length);
        }();
      }
      for (var i = 0; i < files.length; i++) {
        if (jsFileValidation(files[i],'type')) {
          result = false;
          return function(){
            alert(o.message._type);
          }();
        }
        if (jsFileValidation(files[i],'size')) {
          result = false;
          return function(){
            alert(o.message._size);
          }();
        }
      }
      if (result && typeof(success) == "function") {
        success();
      }
    }

    function jsFileValidation(file,type) {//不可であればtrue
      var result = true;
      if (type === 'type') {//拡張子
        for (var i = 0; i < o.accept.split(',').length; i++) {
          if (file.type.indexOf(o.accept.split(',')[i].replace(/^\s+|\s+$/g,'')) >= 0) {
            result = false;
            break;
          }
        }
      }
      if (type === 'size' && file.size <= o.MAX_SIZE * 1024 * 1024) {
        result = false;
      }
      return result;
    }

    function onChange(files) {
      var _html = '';
      Array.from(files).forEach(function (elm,idx) {
        var reader = new FileReader();
        var result = true;
        var file = files[idx];

        ['size','type'].forEach(function (type) {
          if (jsFileValidation(file,type)) {
            result = false;
            alert(o.message['_'+type]);
            $input.val('');
          }
        });

        if (result) {
          $(reader).on('load', function () {
            _html += '<div class="drop_image_box">';
            _html += '<div class="drop_image" style="background-image:url('+reader.result+');"></div>';
            _html += '<div class="drop_contents">';
            _html += '<div class="drop_text">'+ file.name + '</div>';
            _html += '<div class="drop_button"><button type="button" class="drop_cancel">×</button></div>';
            _html += '</div>';
            _html += '</div>';
            if (idx === files.length-1) {
              _html = $(_html);
              $output.append(_html);
              $el.hide();
            }
          });
          reader.readAsDataURL(file);
        }
      });
    }

    $input.on('change',function () {
      $output[0].innerHTML = '';
      if (!this.files.length) {
        return;
      }
      var files = this.files;
      jsFilesValidation(files,function(){
        onChange(files);
      });
    });
    $el.on('dragover',function(e) {
      e.preventDefault();
      $el.addClass('dragover');
    });
    $el.on('dragleave',function(e) {
      e.preventDefault();
      $el.removeClass('dragover');
    });
    $el.on('drop',function(e) {
      e.preventDefault();
      $el.removeClass('dragover');
      var files = e.originalEvent.dataTransfer.files || e.dataTransfer.files;
      jsFilesValidation(files,function(){
        $input[0].files = files;
      });
    });
    $output.on('click','.drop_cancel',function() {
      $input.val('').trigger('change');
      $el.show();
    });

    init();
    return this;// メソッドチェーンの有効化
  }
})(jQuery);

$('.imagedragdrop').jqueryImageDragDrop();

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

同じカテゴリの前後の記事


  1. KATOON.NET
  2. WEB
  3. js 画像をドラッグ ドロップで ブラウザに表示する