将 FormData 对象放入数组中以从不同的输入文件上载文件
Put FormData object into an array to upload files from different input files
我有一个这样的形式:
<form>
<div class="characteristicData" id="1">
<textarea></textarea>
<input type="file" name="filelist-1" />
</div>
<div class="characteristicData" id="2">
<textarea></textarea>
<input type="file" name="filelist-2" />
</div>
<input type="button" class="send" value="Send" />
</form>
此表单包含三个div,用于区分将其正确发送到服务器并在数据库中为所属id
设置正确值所需的数据。
我想在服务器上获取$_POST
和$_FILES
的数据是这样的:
$_POST
Array
(
[characteristic] => Array
(
[element_0] => Array
(
[id_characteristic] => 1
[items] => 0001,0002,0003
)
[element_1] => Array
(
[id_characteristic] => ="2"
[items] => 0001,0002,0003
)
)
)
$_FILES
Array
(
[characteristic] => Array
(
[element_0] => Array
(
[name] => items.csv
[type] => application/vnd.ms-excel
[tmp_name] => tmp/php44DF.tmp
[error] => 0
[size] => 8
)
[element_1] => Array
(
[name] => items.csv
[type] => application/vnd.ms-excel
[tmp_name] => tmp/php44DF.tmp
[error] => 0
[size] => 8
)
)
)
因此,我的选择是尝试创建一个包含键的对象,每个键都包含 FormData 对象。最后,我jQuery
是这样的:
$(function() {
$(".send").click(function() {
var formdata = new FormData(),
$this,
fileDOM = $("input[type='file']")[0];
$(".characteristicData").each(function(i, v) {
$this = $(this);
fileDOM = $this.find("input[type='file']")[0];
formdata.append("characteristic[element_"+i+"][id_characteristic]", $this.attr("id"));
formdata.append("characteristic[element_"+i+"][items]", $this.find("textarea").val());
if ( $this.find("input[type='file']").val() ) {
formdata.append("characteristic[element_"+i+"][file]", fileDOM.files[0], fileDOM.files[0].name);
}
});
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false
});
});
});
该代码工作正常,当我打印$_POST
和$_FILES
变量时,结果是我预期的,但不适用于$_FILES
。我从文件中得到的是:
Array
(
[characteristic] => Array
(
[name] => Array
(
[element_0] => Array
(
[file] => items.csv
)
[element_1] => Array
(
[file] => items.csv
)
)
[type] => Array
(
[element_0] => Array
(
[file] => application/vnd.ms-excel
)
[element_1] => Array
(
[file] => application/vnd.ms-excel
)
)
[tmp_name] => Array
(
[element_0] => Array
(
[file] => E:'wamp'tmp'php44DF.tmp
)
[element_1] => Array
(
[file] => E:'wamp'tmp'php44E0.tmp
)
)
[error] => Array
(
[element_0] => Array
(
[file] => 0
)
[element_1] => Array
(
[file] => 0
)
)
[size] => Array
(
[element_0] => Array
(
[file] => 8
)
[element_1] => Array
(
[file] => 8
)
)
)
)
有什么方法可以得到我期望的结果吗?
几天没有寻找解决问题的方法后,今天我决定找到它,我做到了。
首先,我尝试将每个div的整个数据放入一个数组中,然后将该数组放入formdata中,问题是在服务器上我得到了一个[object file]
,但我无法从中获取任何东西。$_FILES
数组为空,所以我回滚到开头。
然后,查看我的javascript
代码,更具体地说,这部分:
if ( $this.find("input[type='file']").val() ) {
formdata.append("characteristic[element_"+i+"][file]", fileDOM.files[0], fileDOM.files[0].name);
}
这给了我在服务器上丑陋的数组,所以我认为数组是问题所在,我决定删除characteristic[]
数组并使用$_POST
和$_FILES
作为我的数据的数组容器。此外,我在将文件附加到表单数据时删除了"["文件"]"索引。
$(".characteristicData").each(function(i, v) {
$this = $(this);
fileDOM = $this.find("input[type='file']")[0];
formdata.append("element_"+i+"[id_characteristic]", $this.attr("id"));
formdata.append("element_"+i+"[items]", $this.find("textarea").val());
if ( $this.find("input[type='file']").val() ) {
formdata.append("element_"+i, fileDOM.files[0], fileDOM.files[0].name);
}
});
现在,当我将数据发送到服务器并打印值时,我得到了文件的预期值。
Array
(
[element_0] => Array
(
[name] => 001.png
[type] => image/png
[tmp_name] => E:'wamp'tmp'php9BA.tmp
[error] => 0
[size] => 578
)
)
相关文章:
- Javascript,文件输入和FormData问题
- Javascript获取具有不同id的文件数's来自没有多个属性的文件输入元素
- 访问javascript文件输入变量的值
- 从IE中的不同元素调用时,文件输入控件未正确启动
- 多次打开多个文件输入,而不会丢失以前选择的文件
- jquery形成多文件输入字段Value()
- 如何从 Chrome 中的文件输入中删除“未选择文件”工具提示
- 如果从文件输入按钮调用 .ajaxSubmit() 时,它是必需的表单
- 生成由文件输入在特定时间选择的视频文件的缩略图/快照
- 使用javascript获取文件输入
- krajee引导程序文件输入上传
- on('change')不适用于动态添加的文件输入
- 选择要初始化精细上传器的文件输入
- 在DOM中以img的形式插入文件输入
- 单击跨度内的隐藏文件输入会导致RangeError
- 显示当前文件输入有文件后的下一个文件输入
- Krajee文件输入小部件'上传'方法引发异常
- 在引导文件输入中通过post发送一个额外的变量
- 引导文件输入
- 为什么在文件输入上触发点击事件也会在表单上触发提交事件