image uploader

작성중...

<form enctype="multipart/form-data" method="post" action="upload.php">
<div class="row">
  <label for="fileToUpload">Select Files to Upload</label><br />
  <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
  <output id="filesInfo"></output>
</div>
<div class="row">
  <input type="submit" value="Upload"/>
</div>
</form>

<script>
function fileSelect(evt) {
  var files = evt.target.files;
   
  var result = '';
  var file;
  for (var i = 0; file = files[i]; i++) {
    result += '<li>' + file.name + ' ' + file.size + ' bytes</li>';
  }
  document.getElementById('filesInfo').innerHTML = '<ul>' + result + '</ul>';
}
 
document.getElementById('filesToUpload').addEventListener('change', fileSelect, false);
</script>


<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <form enctype="multipart/form-data" method="post" action="upload.php">
    <div class="row">
      <label for="fileToUpload">Select Files to Upload</label><br />
      <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
      <output id="filesInfo"></output>
    </div>
    <div class="row">
      <input type="submit" value="Upload"/>
    </div>
    <div id="dropTarget" style="width: 100%; height: 100px; border: 1px #ccc solid; padding: 10px;">
      Drop some files here
    </div>

  </form>


  <script>

    function fileSelect(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      if (window.File && window.FileReader && window.FileList && window.Blob) {

        var files = evt.target.files;

        var result = '';
        var file;
        for (var i = 0; file = files[i]; i++) {
          // if the file is not an image, continue
          if (!file.type.match('image.*')) {
            continue;
          }
          result += '<li>' + file.name + ' ' + file.size + ' bytes</li>';
          reader = new FileReader();
          reader.onload = async (evt) => {
              // evt.target.result 은 dataUrl, 이 값은 reader.result 에도 들어가 있다.
              var div = document.createElement('div');
              div.innerHTML = '<img style="width: 90px;" src="' + evt.target.result + '" />';
              document.getElementById('filesInfo').appendChild(div);
          }
          reader.readAsDataURL(file);
        }
        document.getElementById('filesInfo').innerHTML = '<ul>' + result + '</ul>';
      } else {
        alert('The File APIs are not fully supported in this browser.');
      }
    }

    function dragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = 'copy';
    }

    var dropTarget = document.getElementById('dropTarget');
    dropTarget.addEventListener('dragover', dragOver, false);
    dropTarget.addEventListener('drop', fileSelect, false);


    document.getElementById('filesToUpload').addEventListener('change', fileSelect, false);




    // if (window.File && window.FileReader && window.FileList && window.Blob) {
    //   document.getElementById('filesToUpload').onchange = function(){
    //     var files = document.getElementById('filesToUpload').files;
    //     for(var i = 0; i < files.length; i++) {
    //       resizeAndUpload(files[i]);
    //     }
    //   };
    // } else {
    //   alert('The File APIs are not fully supported in this browser.');
    // }

    function resizeAndUpload(file) {
      var reader = new FileReader();
      reader.onloadend = function() {

        var tempImg = new Image();
        tempImg.src = reader.result;
        tempImg.onload = function() {

          var MAX_WIDTH = 400;
          var MAX_HEIGHT = 300;
          var tempW = tempImg.width;
          var tempH = tempImg.height;
          if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
              tempH *= MAX_WIDTH / tempW;
              tempW = MAX_WIDTH;
            }
          } else {
            if (tempH > MAX_HEIGHT) {
              tempW *= MAX_HEIGHT / tempH;
              tempH = MAX_HEIGHT;
            }
          }

          var canvas = document.createElement('canvas');
          canvas.width = tempW;
          canvas.height = tempH;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(this, 0, 0, tempW, tempH);
          var dataURL = canvas.toDataURL("image/jpeg");

          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function(ev){
            document.getElementById('filesInfo').innerHTML = 'Done!';
          };

          xhr.open('POST', 'uploadResized.php', true);
          xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
          var data = 'image=' + dataURL;
          xhr.send(data);
        }

      }
      reader.readAsDataURL(file);
    }
  </script>

</body>



</html>

Reference

HTML5 image upload, resize and crop

쿠...sal

[컴][웹] image uploader

image uploader

Reference

댓글 없음:

댓글 쓰기