jquery ajax 업로드 양식 serialize

Question

html 양식에서 이미지를 업로드하는 데 어려움이 있습니다. 누군가가 항목을 클릭 할 때 양식이 사업부에 추가되고, 여기에 대한 코드입니다 : 양식이 제대로 생성

$("#editavatar").click(function(){ 
    $(".rightdisplay").html('<form class="upload" method="post" enctype="multipart/form-data">'); 
    $(".rightdisplay").append('<div class="editavatar"></div>'); 
    $(".rightdisplay .editavatar").append('<div class="boxtitle">edit avatar</div>'); 
    $(".rightdisplay .editavatar").append('<div class="boxwrapm"><input type="file" name="imageup" id="imageup" value="" /></div>'); 
    $(".rightdisplay .editavatar").append('<div class="boxwrapm"><input type="submit" name="submit" class="imageupload" value="Send" /></div>'); 
    $(".rightdisplay .editavatar").append('</form>'); 
    Cufon.replace('.boxtitle'); 
}); 

, 문제는 내가 양식을 직렬화 할 때 누군가가 제출을 클릭 할 때이다 버튼은 dataString 변수가 비어있는 상태입니다.

$(document).on("click", "input.imageupload", function(event){ 
    event.preventDefault(); 
    dataString = $("form.upload").serialize(); 
    alert(dataString); 
    $.ajax({ 
     type: "POST", 
     url: "http://xxx/upload.php", 
     data: dataString, 
     dataType: "json", 
     success: function(json){ 
      if(json.jresponse==true){ 
       $(".avatar").css({"background" : "url(http://xxx/images/avatars/"+json.juser+".png) #000000 center center no-repeat;"}); 
      } 
      alert(json.jmessage); 
     }, 
     error: function(xhr, textStatus, errorThrown){ 
      alert(errorThrown); 
     } 
    }); 
    return false; 
}); 

왜 직렬화되지 않습니까?

<script src="http://malsup.github.com/jquery.form.js"></script> 

그리고 사용 : 폼 데이터 파일을 업로드하려면 JS 다음 파일을 포함 할 필요도 http://api.jquery.com/serialize/

Answer 1

아약스는 파일을 업로드 할 수 있으며, JQuery와 파일 입력 필드를 직렬화하지 않습니다 다음 이벤트 코드 :

var options = { 
    url: url, 
data : {'username' : username, 'password' :  password ,'repeatpassword' :repeatpassword,'firstname' :firstname,'lastname' :lastname,'email' :email}, 
success:function(data) { 
    alert(data);  
    } 
}; 

$('#formId').ajaxForm(options); 

Answer 2

를 참조