如何使HTML数组FORMDATA

我有一个HTML表单，有两个字段类型的文本和输入型文件中的字段如何使HTML数组FORMDATA

这是下面的代码

<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">

一旦用户填写了这一领域，并点击添加到容器按钮，它将被添加到一个数组中（用户可以添加多达表格到数组）

最后他点击提交按钮来将数组的所有内容插入到数据库中阿贾克斯电话

这是我的代码

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/

来源

2016-09-29 Pawan

你尝试用'serializeArray（）'？ –

尝试一些事情是这样的：

<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上传图片会很好。

来源

2016-09-29 10:04:49

在这里我需要发送多个FormData，上面的代码适用于一个表单 – Pawan

检查更新后的答案。 –

谢谢你为我工作，但你是如何管理它在后端？你有没有使用java的任何chnace？ – Pawan

利用serializeArray代替FORMDATA作为

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

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

你可以像下面这样做

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

JSFIDDLE

来源

2016-09-29 10:08:43

谢谢，这对我有用。 – Pawan

但为什么它不显示图片名称的形式，而循环数组http://jsfiddle.net/fx7su2rp/294/？ – Pawan

serializeArray不适用于文件上传，因为JavaScript无法访问在该字段中输入的文件的内容。浏览器最多可以允许访问文件名。在上传到临时工作区后，需要在服务器上完成对文件进行的任何处理 –

如何使HTML数组FORMDATA

回答

相关问题