HTMLの画像アップロードについて

2649 ワード

HTMLの画像アップロードについて
このアップロード要素がフォームに含まれている場合、フォームのenctypeはmultiiprt/form-dataに指定しなければなりません.methodは必ずpostに指定してください.ブラウザは認識して正しく実行します.しかし、ブラウザはユーザーがクリックしてローカルファイルを選択するだけで、JavaScriptでのvalue割り当ては効果がありません.ユーザーがあるファイルをアップロードした後、JavaScriptもこのファイルの真実なパスを獲得できませんでした.しかし、FileとFileReaderの2つの主要なオブジェクトを利用して、ファイル情報を得てファイルを読み込む方法があります.例ファイル:file-uplload-demo.
HTMLファイル:
  

  
  

       

CSS文件:

#test-image-preview {
  border: 1px solid #ccc;
   width: 100%;
   height: 200px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
}
JavaScript:


  var
    fileInput = document.getElementById('test-image-file'),
       info = document.getElementById('test-file-info'),
       preview = document.getElementById('test-image-preview');
       //   change  :
       fileInput.addEventListener('change', function() {
         //       :
          preview.style.backgroundImage = '';
          //         :
          if(!fileInput.value) {
               info.innerHTML = '      ';
                   return;
          }                    
          //   File  :
          var file = fileInput.files[0];
          //      
          var size = file.size;
          if(size >= 1*1024*1024){
                alert('    1   !');
                return false;
          }
          //   File  :
          info.innerHTML = '  : ' + file.name + '<br>' +
                           '  : ' + file.size + '<br>' +
                           '  : ' + file.lastModifiedDate;
          if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
              alert('         !');
              return;
                    
          //     :
          var reader = new FileReader();
                reader.onload = function(e) {
                  var
                       data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64  )...}'            
                       preview.style.backgroundImage = 'url(' + data + ')';
               };
                //  DataURL       :
                reader.readAsDataURL(file);
                console.log(file);
           });