2014-07-16 5 views
0

언젠가 Blueimp jQuery File Upload 플러그인을 사용하고 있으며 모든 것이 잘 작동하는 것 같습니다. 며칠 전 필자는 fileuploadadd 콜백을 추가하여 파일 데이터를 전역 배열에 푸시했습니다. 파일 업로드가 제대로 작동하지만 클라이언트 측에서 설정된 다시 크기 옵션이 작동하지 않으면 이미지가 원본 크기로 업로드됩니다. 800X600 최대 너비 및 높이 이미지를 크기를 조정해야합니다.Blueimp Jquery File Upload Image fileuploadadd 함수로 바인드 할 때 리사이즈 옵션이 작동하지 않습니다.

$('#eventForm').fileupload({ 
       disableImageResize: false, 
       //filesContainer: $('div.files'), 
       autoUpload: false, 
       imageMaxWidth: 800, 
       imageMaxHeight: 600, 
       previewMaxWidth: 150, 
       previewMaxHeight: 150, 
       maxFileSize: 5000000, 
       acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, 
       singleFileUploads: false, 
       downloadTemplateId: 'event-download', 
       uploadTemplateId: 'event-upload', 
       uploadTemplate: function(o) { 
        var rows = $(); 
        $.each(o.files, function (index, file) { 
        var row = $('<tr class="template-upload bgWhite fade">' + 
         '<td class="floatl"><span class="preview"></span></td>' + 
         '<td class="dispNone"><p class="name"></p>' + 
         '<div class="error"></div>' + 
         '</td>' + 
         '<td class="dispNone"><p class="size"></p>' + 
         '<div class="progress"></div>' + 
         '</td>' + 
         '<td class="dispNone">' + 
         (!index && !o.options.autoUpload ? 
          '<button class="start" disabled>Start</button>' : '') + 
         (!index ? '<button class="cancel">Cancel</button>' : '') + 
         '</td>' + 
         '</tr>'); 
        row.find('.name').text(file.name); 
        row.find('.size').text(o.formatFileSize(file.size)); 
        if (file.error) { 
         row.find('.error').text(file.error); 
        } 
        rows = rows.add(row); 
        }); 
        return rows; 
       }, 
       // Uncomment the following to send cross-domain cookies: 
       //xhrFields: {withCredentials: true},     
       url: jQuery('#site').val() + 'events/upload?4aToken=' + jQuery('#4aToken').val(), 
       success: function(data){ 
        //do success callback here; 
       }, 
      }).bind('fileuploadsubmit', function(e, data) { 
       jQuery('.fileupload-progress').removeClass('display-hide'); 
       //validate file share status 
        if ((jQuery('#shareCkts').val() == null || jQuery('#shareCkts').val() == '')) { 
         data.context.find('button').prop('disabled', false); 
         jQuery('#updateFrmValdtn_Nostalgia').parent().css('display', 'help-block').removeClass('display-hide'); 
         jQuery('#updateFrmValdtn_Nostalgia').html('Please share this Nostalgia Moment to circuits').removeClass('dispNone'); 
         return false; 
        } 
        var inputs = data.context.find(':input'); 
//     if (inputs.filter('[value=""]').first().focus().length) { 
//      data.context.find('button').prop('disabled', false); 
//      return false; 
//     } 
         data.formData = jQuery('#eventForm').serializeArray(); 
      }).bind("fileuploadadd", function(e, data){ 
       filesList = []; 
       filesList.push(data.files[0]); 

      }); 

내가 사용하여 다른 아약스 호출의 성공을 서버에 파일 데이터를 전송하고 있습니다 :

jQuery('#eventForm').fileupload('send', {files:filesList}); 

내가 검색 한 fileuloadadd를 사용하거나 재설정됩니다 플러그인 옵션을 콜백 추가에 그 발견했다. 어쨌든이 작업 흐름으로 이미지 크기 조정 옵션을 지정할 수 있습니까? 당신은 그냥 호출 할 필요가 그것의 모습으로

답변

1

: .bind("fileuploadadd"...) 내부에 표시되는 data 객체에

data.submit(); 

.

autoUpload: false,을 읽는 다른 사용자는 submit()이 자동으로 호출되기 때문에 중요합니다.

+0

이 답변을 수락 해주십시오. 'autoUpload : false'는 절대적인 키입니다. 'uploadTemplate'는'.bind ("fileuploadadd"...)'이벤트를 사용하면 절대 실행되지 않습니다. – Tomas