jquery ajax上传表单序列化

我在上传html表单时遇到了一些困难。当有人点击一个项目的形式被添加到一个div，下面是该代码：jquery ajax上传表单序列化

$("#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; 
});

为什么不序列化？

来源

2012-01-28 JustaN00b

AJAX不能上传文件和jQuery不序列文件输入字段，也看到http://api.jquery.com/serialize/

来源

2012-01-28 13:09:45 giorgio

我明白了，猜测它回到了制图板，那么感谢您的意见，乔治。 – JustaN00b 2012-01-28 14:02:18

虽然有异步上传文件的方法，但搜索“ajax文件上传”，例如。通过一些定制你可以模拟正常的表单提交行为与文件上传 – giorgio 2012-01-29 04:04:27

如果您想与表单数据上传文件需要包含以下js文件：

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

，并使用以下任何事件的代码：

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);

来源

2013-11-05 09:42:29

jquery ajax上传表单序列化

回答

相关问题