jquery ajax 上传表单序列化答案

【问题标题】：jquery ajax upload form serializejquery ajax 上传表单序列化
【发布时间】：2012-01-28 13:06:55
【问题描述】：

我在从 html 表单上传图片时遇到了一些困难。当有人点击一个项目时，表单被添加到一个 div 中，下面是它的代码：

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

为什么不序列化？

【问题讨论】：

标签： jquery ajax upload

【解决方案1】：

ajax 无法上传文件，jquery 不序列化文件输入字段，另见http://api.jquery.com/serialize/

【讨论】：

我明白了，猜猜它又回到了绘图板上，感谢 Giorgio 的输入。
虽然有异步上传文件的方法，但搜索“ajax 文件上传”例如。通过一些自定义，您可以通过文件上传模拟正常的表单提交行为

【解决方案2】：

如果要上传带有表单数据的文件需要包含以下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);

【讨论】：