Question

我有一个HTML FORM，其中两个字段是类型文本和输入类型文件Fields

这是以下代码

<form id="myForm" method="post">
   First name: <input type="text" id="fname" name="fname"><br>
   Files: <input type="file" id="files" name="files" multiple><br/>
</form>
<br><br><br>
<input type="button" value="Add To Container" class="addtocontainer">
<input type="button" value="Submit Ajax call " class="callAjax">

用户填写此字段后，点击添加到容器按钮，它将被添加到数组中（用户可以添加与表单一样多的表单）

最后他点击了Submit按钮，通过Ajax调用将数组的所有内容插入到数据库中

这是我的代码

var newArr=[];

$(document).on("click", ".addtocontainer", function(event) {
  var form = $('form')[0]; 
   var formData = new FormData(form);
   newArr.push(formData);
   $("#fname").val('');
    $("#files").val('');
});

$(document).on("click", ".callAjax", function(event) {
   for(var i=0;i<newArr.length;i++)
   {
   console.log(newArr[i]);
   }
});

在callAjax事件中，当我通过循环数组检索它时，我得到FomData为空你能否告诉我这是否是正确的方法

这是我的小提琴

http://jsfiddle.net/fx7su2rp/290/

Answer 1

使用serializeArray而不是formData作为

var formData = $(form).serializeArray();

PS：serializeArray不适用于文件上传，因为JavaScript没有访问在该字段中输入的文件的内容。在大多数浏览器可能允许访问文件名。任何处理你想要做的文件需要在服务器上完成之后它被上传到临时工作区。

你可以这样做

   var formData = $(form).serializeArray();
   formData.push($('input[name="files"]').val());

<强> JSFIDDLE

Answer 2

尝试这样的事情：

<script>
$(document).ready(function(){
    $('#upload').on('click', function() {
        var file_data = $('#pic').prop('files')[0];
        var form_data = new FormData();
        form_data.append('file', file_data);

        form_data.append('index', value);
        form_data.append('index', value);
        // you can send multiple index => value pair as you want

        $.ajax({
                url         : 'upload.php',     // point to server-side PHP script 
                dataType    : 'text',           // what to expect back from the PHP script, if anything
                cache       : false,
                contentType : false,
                processData : false,
                data        : form_data,                         
                type        : 'post',
                success     : function(output){
                    alert(output);              // display response from the PHP script, if any
                }
         });
         $('#pic').val('');                     /* Clear the file container */
    });
});
</script>
</head>

<body>
<input id="pic" type="file" name="pic" />
<button id="upload">Upload</button>
</body>
</html>

使用ajax上传图片对我来说很好。

如何制作HTML FormData数组

2 个答案: