先区分一下H5和普通表单
普通表单多文件上传写法
<
form
id=
"uploadForm"
enctype=
"multipart/form-data"
>
<
p
>指定文件夹名：
<
input
type=
"text"
name=
"uploadDir"
value=
""
/></
p
>
<
p
>上传文件：
<
input
type=
"file"
class=
"img-file"
name=
"file"
/></
p
>
<
p
>上传文件：
<
input
type=
"file"
class=
"apk-file"
name=
"file2"
/></
p
>
<
input
type=
"button"
value=
"上传"
onclick=
"doUpload()"
/>
</
form
>
在用下面的FormData序列化表单的同时，会把name当做上传时的文件键值，有两个不同的键值。
function
doUpload() {
// formData = new FormData();
// img_file=$('.img-file')[0].files[0];
// formData.append('file',img_file);
// apk_file=$('.apk-file')[0].files[0];
// formData.append('file',apk_file);
// console.log(img_file);
// console.log(apk_file);
var
formData =
new
FormData(
$(
"#uploadForm")[
0]);
$.
ajax({
url:
'http://192.168.0.129:8080/369CMS/apk/00101',
type:
'POST',
data:
formData,
async:
false,
cache:
false,
contentType:
false,
processData:
false,
success
:
function (
returndata) {
console.
log(
returndata);
},
error
:
function (
returndata) {
//alert(returndata);
}
});
}
layui写法和H5多文件上传写法
两者是一个性质 multiple
<input class="layui-upload-file" type="file" accept="undefined" name="file[]" multiple="">
一个控件可选择多文件进行上传 区别在于 name 为数组格式，另外添加multiple
layui写法：
var
uploadListIns =
upload.
render({
elem:
'#upimg'
,
url:
'http://192.168.0.129:8080/369CMS/apk/00101'
//,url:'../../php/1.php'
,
auto:
false
,
method:
'post'
,
exts:
'png|jpg|jpeg|gif|apk'
,
bindAction:
'#upimgy'
,
multiple:
true
,
field:
'file[]'
// ,datatype:'json'
// ,headers: {fileName:'11',cellNumber: '',deviceID: '',secretCode: ''}
,
data:{
uploadDir:
'asdsadsad'
}
,
choose
:
function(
obj){
var
files =
this.
files =
obj.
pushFile();
//预读本地文件示例，不支持ie8,得到包括文件的对象
var
files =
obj.
pushFile();
//将文件对象取出,给headers
// for(let i in files){
// this.headers.fileName = files[i].name;
// }
//var that = this;
obj.
preview(
function(
index,
file,
result){
// console.log(index); //得到文件索引
// console.log(file); //得到文件对象
// console.log(result); //得到文件base64编码，比如图片
tr =
'<img-see><img class="img-up" src="'+
result +
'" alt="'+
file.
name +
'" class="layui-upload-img"><span class="img-namee">'+
file.
name+
'</span><button class="layui-btn layui-btn-danger delete-img">删除</button> </img-see>'
jQuery(
'#demo2').
append(
tr)
//that.headers.fileName = file.name
jQuery(
'.delete-img').
click(
function(){
delete
files[
index];
//删除文件
jQuery(
'img-see').
remove();
uploadListIns.
config.
elem.
next()[
0].
value =
'';
})
// tr.find('.delete-img').on('click', function(){
// delete files[index]; //删除对应的文件
// tr.remove();
// uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
// });
});
}
,
before
:
function(
obj){
jQuery(
'.previewone').
append(
'<span class="img-span" >正在上传</span>')
}
,
done
:
function(
res){
console.
log(
res);
//如果上传失败
if(
res.
result !=
'01'){
return
layer.
msg(
'上传失败');
}
//上传成功
if(
res.
result ==
'01'){
//img_id = res.data.apk_img_id
jQuery(
'.img-span').
remove();
jQuery(
'.previewone').
append(
'<span class="img-span" >上传完成！</span>');
}
}
,
error
:
function(){
// 演示失败状态，并实现重传
// var demoText = jQuery('#demoText');
// demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
// demoText.find('.demo-reload').on('click', function(){
// uploadInst.upload();
// });
}
});
layer的input控件name可以在field:'file[]'
处直接设置
图中另外写了如何设置 文件的其他数据 作为请求头的方式
【比如上传的文件名字】