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上傳表單序列化

回答

相關問題