제어 이미지 너비 및 높이 업로드 이미지

Question

직선을 가리 키십시오. plupload를 사용하여 이미지를 업로드 할 때 이미지의 너비와 높이의 한도를 설정하고 싶습니다.

Letsay : 폭 경우 : 1000px 높이 : 다른 1000px 최소한의 폭으로 이미지를 업로드해야합니다 : 1000px 높이 : 1000px

// $(".form").validator(); 
$(function() { 
    if($("#uploader").length > 0) { 
     var uploader = new plupload.Uploader({ 
      runtimes : 'html5,flash,silverlight', 
      browse_button : 'pickfile', 
      container : 'uploader', 
      max_file_size : '10mb', 
      url : 'design.php?do=upload&ajax=1', 
      multiple_queues: false, 
      file_data_name: 'design', 
      flash_swf_url : www + '/js/plupload.flash.swf', 
      silverlight_xap_url : www + '/js/plupload.silverlight.xap', 
      filters : [ 
       {title : "Image files", extensions : "jpg,gif,png,jpeg,bmp"} 
      ] 

     }); 

     $('#uploadfiles').click(function(e) { 
      if($("#uploader select[name=category]").val() == "") { 
       $("#uploader select[name=category]").next('.error-required').show(); 
       return false; 
      } 

      uploader.start(); 
      e.preventDefault(); 
     }); 

     uploader.init(); 

그래서,이 수를?

Answer 1

plupload에 대한 필터를 쉽게 작성할 수 있습니다.

최소 요구 너비에 대한 필터입니다. 스크립트에 벨로우즈 코드를 추가하십시오. (그냥 복사)

plupload.addFileFilter('min_width', function(maxwidth, file, cb) { 
    var self = this, img = new o.Image(); 

    function finalize(result) { 
     // cleanup 
     img.destroy(); 
     img = null; 

     // if rule has been violated in one way or another, trigger an error 
     if (!result) { 
      self.trigger('Error', { 
       code : plupload.IMAGE_DIMENSIONS_ERROR, 
       message : "Image width should be more than " + maxwidth + " pixels.", 
       file : file 
      }); 
    } 
     cb(result); 
    } 
    img.onload = function() { 
     // check if resolution cap is not exceeded 
     finalize(img.width >= maxwidth); 
    }; 
    img.onerror = function() { 
     finalize(false); 
    }; 
    img.load(file.getSource()); 
}); 

그리고 업로드 스크립트에이 필터를 추가합니다.

filters : { 
      min_width: 700, 
     }, 

Answer 2

Plupload는이 자체를 지원하지 않습니다 (although it has been requested). IE (you can in some other browsers)에 업로드하기 전에 이미지 크기를 가져올 수 없기 때문에 두 번째로 HTML4/5 메서드를 사용하는 일부 브라우저에서 작동 할 수 있지만 두 번째로는 몇 가지 이유가있을 수 있습니다. Flash/Silverlight 등의 메소드가 신뢰성있게 차원을 결정할 수 있어야합니다.

브라우저가 제한적일 경우 HTML4/5 방식 만 사용하면 "FilesAdded" event에 연결해야합니다.

uploader.bind('FilesAdded', function(up, files) { 
    //Get src of each file, create image, remove from file list if too big 
}); 

Answer 3

저는 최근에 똑같은 일을하고 싶었고 Thom이 제안한 방식대로 달성 할 수있었습니다. 그는 그것의 한계에 대해 옳았습니다. 이 기능을 추가하려면 플래시 또는 실버 라이트 런타임이 아닌 최신 브라우저에서만 작동합니다. 내 비 html5 사용자가 전에 업로드 후 오류가 발생하기 때문에 큰 문제는 아닙니다.

전체 이미지 개수 변수를 초기화하여 페이지에 배치 된 이미지를 추적합니다. 또한 사진을 모두 읽은 후에 삭제할 사진을 저장할 수 있습니다.

var total_image_count = 0; 
var files_to_remove = []; 

은 그 때 나는, 어쨌든 이미지의 썸네일을 표시하고자 그래서 페이지에 그들을 배치하고 그 폭

init:{ 
     FilesAdded: function(up, files) { 
      if (uploader.runtime == "html5"){ 
       files = jQuery("#"+uploader.id+"_html5")[0].files 
       console.log(files); 
       for (i in files){ 

       //create image tag for the file we are uploading 
       jQuery("<img />").attr("id","image-"+total_image_count).appendTo("#upload-container"); 

       reader_arr[total_image_count] = new FileReader(); 

       //create listener to place the data in the newly created 
       //image tag when FileReader fully loads image. 
       reader_arr[total_image_count].onload = function(total_image_count) { 
        return function(e){ 
         var img = $("#image-"+total_image_count); 
         img.attr('src', e.target.result); 
         if ($(img)[0].naturalWidth < 1000){ 

          files_to_remove.push(files[i]); //remove them after we finish reading in all the files 
          //This is where you would append an error to the DOM if you wanted. 
          console.log("Error. File must be at least 1000px"); 
         } 
        } 
       }(total_image_count); 

       reader_arr[total_image_count].readAsDataURL(files[i]); 

       total_image_count++; 
       } 
       for (i in files_to_remove){ 
       uploader.removeFile(files_to_remove[i]); 
       } 
      } 
     } 
    } 

보조 노트로 얻을을 FileReader()와 보류중인 파일을 읽을 이 방법은 저에게 큰 도움이됩니다. DOM에 이미지를 추가하지 않고 이미지의 너비를 가져 오는 방법을 알아 냈습니다.

출처 :

미리 업로드하기 전에 이미지 : https://stackoverflow.com/a/4459419/686440

액세스 이미지의 자연 폭 : https://stackoverflow.com/a/1093414/686440

Answer 4

썸네일없이 폭과 heigth에 액세스하려면이 작업을 수행 할 수있는 이미지 :

uploader.bind('FilesAdded', function(up, files) { 
    files = jQuery("#"+uploader.id+"_html5").get(0).files; 
    jQuery.each(files, function(i, file) { 
     var reader = new FileReader(); 
     reader.onload = (function(e) { 
      var image = new Image(); 
      image.src = e.target.result; 

       image.onload = function() { 
        // access image size here using this.width and this.height 
       } 
      }; 

     }); 

     reader.readAsDataURL(file); 
    } 
}