在我的代码中有一个包含2个输入元素的表单:
文字输入和
文件输入(包含图像).
我在按钮点击时附加每个文件输入
并希望在ajax调用中上传所有图像,
但在我的PHP文件中,我只获得了文本输入的最终图像和值.
我的html和jquery代码如下:
<html> <body> <form name="ajax_image" id="ajax_image" method="post"> <input type="text" name="project_name" id="project_name" placeholder="Project Name" /><br/><br/> <input type="text" name="project_duration" id="project_duration" placeholder="Project Duration" /><br/><br/> <div id="image_uploads"> <input type="file" name="project_image[]" class="project_image" placeholder="Project Image" /> <input type="button" name="add_upload" id="add_upload" value="+" /> <br/><br/> </div> <input type="submit" name="submit" id="submit" value="Submit" /> </form> </body> </html>
Jquery代码
<script> $(document).ready(function () { var count=0; $("#add_upload").click(function(){ var input = '<input type="file" name="project_image[]" class="project_image" placeholder="Project Image"/><br/><br/>' $("#image_uploads").append(input); count++; }); $("#ajax_image").submit(function (event) { event.preventDefault(); var data = new FormData(); for(var j=0 ; j<= count ; j++) { // alert(j); $.each($(".project_image")[j].files,function (i,file) { data.append(i,file); }); } $.each($('#ajax_image').serializeArray(),obj) { data.append(obj.name,obj.value) }); $.ajax({ url: "http://localhost/hetal/multi_image_PHP_ajax.PHP",type: "POST",data: data,processData: false,contentType: false,success: function () { alert('Form Submitted!'); },error: function () { alert("error in ajax form submission"); } }); }); }); </script>
<?PHP print_r($_POST); print_r($_FILES); ?>
解决方法
文档准备好后添加一个变量:
var fileCounter = 0;
$.each($(".project_image")[j].files,file) { data.append(fileCounter,file); fileCounter++; });
问题是您在POST请求中发送了两个具有相同名称的文件.您可以通过打开ajax请求并单击Firebug中的POST选项卡来查看此信息.这两个文件都是这样的,所以每个下一个文件都会覆盖前一个文件:
Content-disposition: form-data; name="0";
编辑:它存在一个更简单的解决方案,只需通过传递一个j作为追加的第一个参数,而不是杂乱:
for(var j=0 ; j<= count ; j++) { $.each($(".project_image")[j].files,file) { data.append(j,file); }); }
编辑2
它也可以通过使用文件输入的多个属性来完成.那么添加其他输入就不是必需的,而只需要发送一次.
HTML:
<form name="ajax_image" id="ajax_image" method="post" enctype="multipart/form-data"> <input type="text" name="project_name" id="project_name" placeholder="Project Name" /><br/><br/> <input type="text" name="project_duration" id="project_duration" placeholder="Project Duration" /><br/><br/> <input type="file" name="project_images" class="project_images" placeholder="Project Image" multiple /><br/><br/> <input type="submit" name="submit" id="submit" value="Submit" /> </form>
JS:
$(document).ready(function () { $("#ajax_image").submit(function (event) { var data = new FormData(); event.preventDefault(); $.each($(".project_images")[0].files,function (key,file){ data.append(key,file); }); $.each($('#ajax_image').serializeArray(),obj) { data.append(obj.name,obj.value) }); $.ajax({ url: "upload.PHP",success: function () { alert('Form Submitted!'); },error: function () { alert("error in ajax form submission"); } }); }); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。