Ajax로 수정 된 이미지 업로드

Question

사용자가 사용자 아바타를 업데이트하고 프로필을 수정할 수있는 양식이 있습니다. 그것은 그대로, 그것은 잘 작동, 사용자가 자신의 사진을 선택하고 잘 업로드합니다.

하지만 업로드하기 전에 사진을 수정하고 필요에 따라 자르기 및 회전을 적용하고 싶습니다. 수정 작업이 정상적으로 처리되었습니다. 문제는 사용자가 선택한 파일을 수정 된 파일로 대체하는 방법입니다.

FormData 객체에 입력 이름과 파일 데이터를 추가하려했지만 여전히 사용자 지정 이미지를 사용하고 있습니다. 이것은 지금까지 내 코드입니다

:

var formData = new FormData(form[0]); 
var newImg = canvasResize($('#member_avatar')[0].files[0], { 
     width: 400, 
     height: 400, 
     crop: true, 
     quality: 100, 
     callback: function(data, width, height) { 
      formData.append("member_avatar", data); 
     } 
    }); 

$.ajax({ 
    url: form.attr('action'), 
    type: form.attr('method').toUpperCase(), 
    data: formData, 
    cache: false, 
    processData: false, 
    contentType: false, 
    success: function(data, textStatus, jqXHR) 
    { 
     if(typeof data.error === 'undefined') 
     { 
      // Success so call function to process the form 
      console.log('SUCCESS: ' + data.success); 
     } 
     else 
     { 
      // Handle errors here 
      console.log('ERRORS: ' + data.error); 
     } 
    }, 
    error: function(jqXHR, textStatus, errorThrown) 
    { 
     // Handle errors here 
     console.log('ERRORS: ' + textStatus); 
    }, 
    complete: function() 
    { 
     // STOP LOADING SPINNER 
    } 
}); 

Answer 1

당신이 시도 할 수 있습니다 :

 //After Click run this 
       canvasResize($('#member_avatar')[0].files[0], { 
         width: 400, 
         height: 400, 
         crop: true, 
         quality: 100, 
         callback: function(data) { 
           formData.append(function(){send()}, "member_avatar" , data); 
           } 
       }); 
function send(){ 
       $.ajax({ 
        url: form.attr('action'), 
        type: form.attr('method').toUpperCase(), 
        data: formData, 
        cache: false, 
        processData: false, 
        contentType: false, 
        success: function(data, textStatus, jqXHR){ 
         if(typeof data.error === 'undefined'){ 
          console.log('SUCCESS: ' + data.success); 
         }else{ 
          console.log('ERRORS: ' + data.error); 
         } 
        }, 
        error: function(jqXHR, textStatus, errorThrown){ 
         console.log('ERRORS: ' + textStatus); 
        }, 
        complete: function(){ 
         // STOP LOADING SPINNER 
        } 
       }) 
} 

희망이 당신을 도울 것입니다.