jquery的formdata可以拼装一个表单的数据通过get,post或者ajax.get,ajax.post方式提交数据.下面直接上代码.
html部分::
<li class="list-group-item disabled select-file-div">
<input type="file" multiple="true" class="input-sm clear-l-r-padding select-file" data-uploadtype="photo"/>
</li>input会被渲染成一个选择文件的按钮,设置其"multiple"属性为true,以便实现多选.js部分(jquery):
var i,
data = new FormData();
...
for (i = 0; i < $('.select-file').files.length; i++) {
data.append('file[]', this.files[i]);
}
...//省略代码若干...在选择完成后调用下面$.ajax
$.ajax({
url: 'url'
type: "POST",
data: data,
dataType: 'json',
processData: false,// *重要,确认为false
contentType: false,
beforeSend: function () {
... },
success: function (res) {
console.log(res);
},
error: function (res) {
...}
});在"data.append('file[]', this.files[i])"这句中,若想上传多个文件请务必设置data.append的键为数组样式的字符串即'xxx[]',原因是Thinkphp的upload方法可以接收数组形式的数据.php部分:
config = array(
'maxSize' => 3145728,
'rootPath' => './Public/resource/i/',
'savePath' => '',
'saveName' => array('uniqid',''),
'exts' => array('jpg', 'gif', 'png', 'jpeg'),
'autoSub' => true,
'subName' => array('date','Ymd'),
);
$upload = new Upload($config);// 实例化上传类
// 上传文件
$info = $upload->upload();
if (!$info) {// 上传错误提示错误信息
$this->ajaxReturn( $upload->getError());
//$this->ajaxReturn($_POST['type']);
} else {// 上传成功
$this->ajaxReturn($info);
}Upload类的使用方法参考3.2.3手册的p297.测试部分:
ok,选择4张图片然后测试一下,会发现chrome调试工具中"NETWORK"产生xhr连接,且status=200,在下方console中可以看见我们打印的返回字符串即upload方法成功后返回的$info数组.
现在我们看看我们使用formdata产生request头信息.(点击name访问的url地址,滚动至最下端)
图中4个request也就是我们ajax.post提交的file对象.
基本功能就是这样.
最佳答案
