html图片上传框架,layui框架实现多图片手动上传和随表单提交方法

window.οnlοad=function(){//Demo

layui.use(['form','upload','element','laydate'], function(){var form =layui.form;var $ =layui.jquery

,upload=layui.upload;//监听提交

form.on('submit(formDemo)', function(data){var date = newDate();

subData={

name:data.field.name.toString(),

major:data.field.major.toString(),

qq:data.field.QQ.toString(),

mobile_phone:data.field.phone.toString(),

sex:data.field.sex.toString()

}

ajax({

type:'post',

url:'/free_clinic/submit',

data:subData,

success:(res)=>{if(JSON.parse(res).msg == 'success'){

tip_text.innerHTML= '预约成功，请等待工作人员处理！';

tip_tip.style.display= 'block';

}else{

tip_text.innerHTML= '预约失败，请重新预约！';

tip_tip.style.display= 'block';

}

},

error:(err)=>{

tip_text.innerHTML= '预约失败，请重新预约！';

}

});return false;

});//多图片上传

upload.render({

elem:'#img_upload_btn' //绑定点击按钮

,url: '/free_clinic/upload' //访问后台路径

,multiple: true //确认上传多张图片

,accept: 'images/*' //图片格式

,number: 6 //最大上传图片数量

,auto:false //取消自动上传

,method: 'post' //请求上传的 http 类型

,bindAction:'#hideUpload' //绑定真正的上传按钮

,data:{ //访问后台提交的数据

id:()=>{return $('#phone').val();//官方文档说明：实现动态传值

},

time:()=>{returnsubData.signup_time;

}

}

,choose:function(obj){//预读本地文件示例，不支持ie8

obj.preview(function(index, file, result){

$('#img_upload').append('');

});

}

,done:function(res){//上传完毕

}

});

});

};