custom input[type="file"] - 폼 커스텀 파일업로드 #1

input file type (디자인된 파일 업로드 타입)

기본 패턴의 파일 업로드 #1 - jQuery

See the Pen 기본 패턴 파일 업로드 - jQuery by jaeheekim (@jaehee) on CodePen.

기본 패턴의 파일 업로드 #2 - jQuery

See the Pen 파일 업로드 타입 #4 by jaeheekim (@jaehee) on CodePen.

기본 패턴의 파일 업로드 - javaScript

See the Pen 기본 패턴 파일업로드 - Only javaScript by jaeheekim (@jaehee) on CodePen.

프로토타입 패턴의 파일 업로드

/**
 * --------------------------------
 * Designed input[type=file]
 * --------------------------------
 */
(function(global, $) {

  $(makeObjFile);

  function makeObjFile() {
    var inputFile = CustomFiletype();
    inputFile.init($('.filetype'));
  }

  function CustomFiletype() {
    if (this === window) return new CustomFiletype;
    this.$fileBox = null;
    this.$fileUpload = null;
  }

  CustomFiletype.prototype = {

    'init': function(fileClass) {
      this.$fileBox = fileClass || $('.filetype');
      this.initEvent();
    },

    'initEvent': function() {
      this.fileUpload();
    },

    'fileUpload': function() {
      var _self = this;

      $.each(_self.$fileBox, function(idx, item) {

        var _$fileBox = _self.$fileBox.eq(idx),
          _$fileType = _$fileBox.find('input[type=file]'),
          _$fileText = _$fileBox.find('input[type=text]');
        _$fileText.attr('disabled', 'disabled');

        _$fileType.on('change', function() {
          var filePath = $(this).val();
          _$fileText.val(filePath);
        })

      })
    }

  }

})(window, jQuery);

See the Pen file upload type by jaeheekim (@jaehee) on CodePen.

Related links

1. 폼 커스텀 파일업로드 #2

Jaehee's WebClub