async_imageupload_example.html

<script type="text/javascript">
  var imageModule = (function () {
    'use strict';
    var possible = window.File && window.FileReader && window.FormData; // html5 업로드를 지원하는지의 여부
    var apiPath = '/api/test.php'; // 업로드 서버 처리 경로
    var folder = '/upload/review/'; // 기본 이미지 업로드 폴더

    var $input;
    var maxWidth = 600;
    var maxHeight = 480;

    var imageArray = []; // callback에 사용할 이미지 파일명 배열
    var callback;

    /**
     * [sendImageFile 이미지 비동기 업로드]
     * @scope  {[private]}
     * @param  {[string]}    imageData     [이미지 binary]
     * @return {[function]}  callback      [업로드 후처리]
     */
    function sendImageFile(imageData) {
      if (imageData) {
        var formData = new FormData();
        formData.append('type', 'upload');
        formData.append('folder', folder);
        formData.append('imageData', imageData);

        $.ajax({
            type: 'post',
            url: apiPath,
            data: formData,
            dataType: 'json',
            contentType: false, // contentType header 제거
            processData: false, // Dom 객체를 전송하려면 false 처리해야함
          })
          .then(function (data) {
            if (data.data) {
              imageArray.push(data.data.file); // 이미지 배열에 저장
              $input.val('');

              if (callback) {
                callback(imageArray);
              } else {
                console.log('callback function not initialized');
              }
            }
          })
          .catch(function (error) {
            console.log("upload fail: ", error);
          });
      } else {
        console.log('image data is null');
      }
    }

    return {
      /**
       * [init 이미지 모듈 초기화]
       * @param  {[string]} fileId       [변경할 input id]
       * @param  {[function]} callbackFunc [후처리]
       * @param  {[object]} settings     [width, height, folder 설정가능]
       */
      init: function (fileId, callbackFunc, settings) {
        if (possible) {
          if (typeof settings === 'object') {
            if (settings.width) {
              maxWidth = settings.width;
            }

            if (settings.height) {
              maxHeight = settings.height;
            }

            if (settings.folder) {
              folder = settings.folder;
            }
          }

          if ($.isFunction(callbackFunc)) {
            callback = callbackFunc;
          } else {
            console.log('callback is not defined');
          }

          var options = {
            maxWidth: maxWidth, // resize width 값
            maxHeight: maxHeight, // resize height 값
            canvas: true, // 사진을 돌리려면 canvas 객체로 받아야함
            downsamplingRatio: 0.5 // 비율에 맞추어 크기 감소
          };

          $input = $('#' + fileId);
          $input.on('change', function (e) {
            e.preventDefault();
            e = e.originalEvent;
            var target = e.dataTransfer || e.target;
            var file = target && target.files && target.files[0];

            loadImage.parseMetaData(file, function (data) { // exif js를 사용해 이미지의 tag를 가져옴
              if (data.exif) {
                options.orientation = data.exif.get('Orientation'); // 화면이 돌아간 비율을 지정
              } else {
                if (options.orientation) {
                  options.orientation = null;
                }
              }

              // 캔버스 이미지 리사이징 처리 후 서버호출
              loadImage(file, function (img) {
                sendImageFile(img.toDataURL());
              }, options);
            });
          });
        } else {
          console.log('file upload is not supported');
        }
      },

      /**
       * [getFolder 업로드 경로 호출]
       * @return {[string]} [경로]
       */
      getFolder: function () {
        return folder;
      },

      /**
       * [delete 이미지 삭제]
       * @param  {[number]}    idx          [이미지 배열의 인덱스]
       * @param {[function]}  callbackFunc  [delete 후처리]
       */
      delete: function (idx, callbackFunc) {
        if (imageArray[idx]) {
          $.ajax({
              url: apiPath,
              type: 'post',
              data: {
                type: 'delete',
                folder: folder,
                filename: imageArray[idx],
              },
              dataType: 'json'
            })
            .then(function (data) {
              console.log('file delete success');
              console.log(data);
              if ($.isFunction(callbackFunc)) {
                callbackFunc(data);
              }
            })
            .catch(function (error) {
              console.log('server file delete failed');
              console.log(error);
            })
            .done(function () {
              imageArray.splice(idx, 1);
              $input.val('');
              if (callback) {
                callback(imageArray);
              } else {
                console.log('callback function not initialized');
              }
            });
        } else {
          console.log('delete index not defined');
        }
      },

      clear: function () {
        console.log('clear array');
        imageArray = [];
      }
    };
  }());


  $(function () {
    imageModule.init('fileInput', function (data) {
      var folder = imageModule.getFolder();
      var str = '';
      for (var i = 0, len = data.length; i < len; i++) {
        str += '<img src="' + folder + data[i] + '" style="width:100%;height:100%;">';
      }

      $('#area').html(str);
      $('#fileData').val(JSON.stringify(data));
    }, {});
    // options, width height folder..
    // {width:500, height:300, folder:'/upload/board/'}
  });

  // after insert into database
  $('#area').empty();
  $('#fileData').val('');
  imageModule.clear();
</script>

<input type="file" name="imageFile" id="fileInput" />