使用 jQuery 表单插件发布数据无法正确提交

Question

背景：我正在开发音乐家的管理页面。假设用户创建了一个专辑，然后将一首歌曲上传到专辑中。我正在使用 ajax posts 和jQuery 表单插件。

首先，我致力于将歌曲上传到现有专辑中（效果很好）。

然后，我致力于创建新专辑并使用 .append() 和 .attr 无需刷新即可显示（效果很好）。

现在我正在努力将一首歌曲上传到通过append() 出现的专辑中。

问题：当创建的专辑准备好时，它是伟大的。所有的值和功能都与页面渲染时加载的相册完全相同。

当我尝试上传歌曲时，服务器端出现错误。它使用与我用来将歌曲上传到 ajaxed 专辑的功能完全相同的功能作为初始页面渲染专辑。

我刷新页面，就可以上传歌曲了。

我正在使用 jQuery.form 插件，我认为这是因为该函数位于 $(document).ready(function { ... }

上传脚本内：

$('form#uploadSongToAlbum').submit(function() { 
  $(this).ajaxSubmit({
    target: 'login/uploadSongToAlbum.php',
    dataType:  'html',
    beforeSubmit: function() { 
      alert(showRequest);
      $.jGrowl("Uploading... hold on...<br />", { life:1000 });
    }, 
    success: function() {
      selectUploadedID(); 
    },
    error: function() {
      $.jGrowl(textStatus, {  header:"<span style='color:red'>Error:</span>", sticky: true });
    }
  });
  return false; 
});

现在，进一步研究问题，我打开了Chrome 中的控制台，进入网络并记录了 ajax 上传和页面加载上传的发布请求，我发现了非常不同的值。 以下是 ajax 上传的帖子值（此值已损坏）：

表单数据：

文件：silence2.mp3

专辑：80

以下是页面加载的帖子值（这个有效）：

请求有效负载：

------WebKitFormBoundaryZpJpGxBLJEBRYadH 内容处置：表单数据；名称=“文件”；文件名=“silence2.mp3” 内容类型：音频/mp3

------WebKitFormBoundaryZpJpGxBLJEBRYadH 内容处置：表单数据；名称=“专辑” 80

------WebKitFormBoundaryZpJpGxBLJEBRYadH--

非常感谢大家。我一定是做错了什么。如果需要的话我可以提供更多代码。请记住：ajax 相册和页面加载相册的 html 标记和值都是有效的。这一定是我做错了 jQuery...

Answer 1

尝试将 enctype 属性添加到动态创建内容的表单标签中：

<form id="uploadSongToAlbum" action="login/uploadSongToAlbum.php" method="post" enctype="multipart/form-data">
    <!-- snip... -->
</form>

此外，如果您的上传脚本是从 $(document).ready 中调用的，则它只会页面加载时调用一次。如果您希望它应用于动态创建的表单，请使用“live()”方法：

$('form#uploadSongToAlbum').live('submit', function() { 
    // ajaxSubmit code here....
});