使用formdata的多文件上传  废话少说 直接上代码

1 JS部分

//选择文件后的处理
function handleFileSelect()
{
var exerciseid=$("#exerciseid").val();
var workerid=$("#workerid").val();
var pic_kind=$("#pic_kind").val();
//var pic_file = $('#pic_file')[0].files[0]; var formData = new FormData(); //formData.append("pic_file",$('#pic_file')[0].files[0]); var filesize=$('#pic_file')[].files.size; alert(filesize); for(var i=; i<$('#pic_file')[].files.length;i++){
alert($('#pic_file')[].files[i].size);
formData.append('file[]', $('#pic_file')[].files[i]);
} formData.append("pic_kind", pic_kind);
formData.append("exerciseid", exerciseid);
formData.append("workerid", workerid); $.ajax({
url: "{:U('Publishset/newUpload')}",
dataType:'json',
type:'POST',
data: formData,
processData : false, // 使数据不做处理
contentType : false, // 不要设置Content-Type请求头
xhr: function(){ //获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ //检查upload属性是否存在
//绑定progress事件的回调函数
myXhr.upload.addEventListener('progress',aprogressHandlingFunction, false);
}
return myXhr; //xhr对象返回给jQuery使用
},
success: function(data){ $('#ap').val();
$('#aprogress').html(''); showExerciseImage(exerciseid);
//if (data) { // alert('上传成功!');
//} },
error:function(response){
console.log(response);
}
}); } //上传进度回调函数:
function aprogressHandlingFunction(e) {
if (e.lengthComputable) {
$('#ap').attr({value : e.loaded, max : e.total}); //更新数据到进度条
var percent = e.loaded/e.total*;
$('#aprogress').html(percent.toFixed() + "%");
}
}

2 html 部分

 <input class="file" id="pic_file" multiple type="file" onchange="handleFileSelect(event)" style="display:none;">

3 PHP部分

 public function newUpload()
{ //上传配置
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize= ;// 设置附件上传大小
$upload->exts=array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath='./uploads/inittestimg/'; // 设置附件上传根目录 $upload->savePath=''; // 设置附件上传(子)目录 //上传文件
$info=$upload->upload(); //参数获取
$exerciseid=$_POST["exerciseid"];
$kind=$_POST['pic_kind'];
$workerid=$_POST['workerid']; if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功 获取上传文件信息 $images = M('initimages'); //循环入库
foreach($info as $file){
$imgarr['exerciseid']=$exerciseid;
$imgarr['src']='./uploads/inittestimg/'.$file['savepath'].$file['savename'];
$imgarr['kind']=$kind;
$imgarr['lastreadtime']=time(); //文件名
//$imgarr['orderid']=str_replace(strrchr($info['pic_file']['name'], "."),"",$info['pic_file']['name']);
$imgarr['orderid']=$file['name']; $images->add($imgarr);
} } echo ;
}

thinkphp3.2.3使用formdata的多文件上传的更多相关文章

  1. Java Web使用Html5 FormData实现多文件上传

    前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法 ...

  2. jQuery用FormData对象实现文件上传以及如何通过ajax下载文件

    之前在Vue的项目里面用到过文件上传,封装好的组件用起来比较顺手,查询Element-UI文档,十八般武器样样都有,一顿操作猛如虎,一看--跑偏了(⊙o⊙)-,我的意思就是用框架实现比较简单,但是如果 ...

  3. WebApi实现Ajax模拟Multipart/form-data方式多文件上传

    前端页面代码: <input type="file" class="file_control" /><br /> <input t ...

  4. multipart/form-data请求与文件上传

    要上传文件,需要用post方法,并且设置enctype为multipart/form-data. <form action="/upload" method="po ...

  5. multipart/form-data请求与文件上传的细节

    <!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8" ...

  6. vue axios 与 FormData 结合 提交文件 上传文件

    ---再利用Vue.axios.FormData做上传文件时,遇到一个问题,后台虽然接收到请求,但是将文件类型识别成了字符串,所以,web端一直报500,结果是自己大意了. 1.因为使用了new  F ...

  7. tp5结合FormData实现ajax文件上传

    或者使用: 下面使用jquery.form.js的表单插件来提交表单

  8. FormData+Ajax 实现多文件上传 学习使用FormData对象

    FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...

  9. vue使用formData进行文件上传

    本文为博主原创,未经允许不得转载 1.vue页面 <ux-form ref="formRef" layout="vertical"> <ux- ...

随机推荐

  1. 3. 移动安全渗透测试-(Android基础漏洞)

    3.1 数据存储漏洞 用户经常会把敏感数据交给app,比如:用户名and密码认证令牌联系人记录通信记录历史使用记录..... 只要愿意,app可以收集这些用户的隐私和个人信息明文存储或明文传输,通常保 ...

  2. Oracle使用命令行登录提示ERROR: ORA-01017: invalid username/password; logon denied

    刚在Windows上面安装好Oracle 10g,刚开始使用PLSQLDevelop软件登录提示  not logged on ,然后使用命令行登录提示 ERROR: ORA-01017: inval ...

  3. 获取mac地址和扫描端口

    获取IP mac地址 arp -a 10.0.0.34 扫描指定IP 1到30000端口 nmap -p1-30000 10.0.0.36

  4. 一次http请求的过程

    http协议(超文本传输协议)是属于应用层的协议,网络分层:应用层(http协议,FTP),传输层(tcp,udp),网络层(ip/ARP),链路层 我们以浏览器向百度发送请求为例: http的发送: ...

  5. Hello,DTOS!(下)

    如何验证编写的主引导程序?解决方案设计:将汇编源码编译为二进制机器码(nasm)创建虚拟盘(bximage)将二进制代码写入虚拟盘起始位置(dd)在虚拟机中将虚拟盘作为启动盘执行(vmware) 就算 ...

  6. DNS解惑之资源记录(2)

    1.区域解析库 每个域都要维护一个区域解析库,而区域解析库都是由一条条的记录组成的,而每一条记录就被称为资源记录(resource  record  RR). 我们知道大多数域名下面都不仅仅有www服 ...

  7. zz姚班天才少年鬲融凭非凸优化研究成果获得斯隆研究奖

    姚班天才少年鬲融凭非凸优化研究成果获得斯隆研究奖 近日,美国艾尔弗·斯隆基金会(The Alfred P. Sloan Foundation)公布了2019年斯隆研究奖(Sloan Research ...

  8. USACO Cow Contest

    洛谷 P2419 [USACO08JAN]牛大赛Cow Contest https://www.luogu.org/problemnew/show/P2419 JDOJ 2554: USACO 200 ...

  9. NOIP 1999 导弹拦截

    洛谷 P1020 导弹拦截 https://www.luogu.org/problemnew/show/P1020 JDOJ 1411: [NOIP1999]拦截导弹 T1 https://neooj ...

  10. iptables学习2

    Firewall:工作在主机或网络边缘,对进出的报文按事先定义的规则进行检查, 并且由匹配到的规则进行处理的一组硬件或软件,甚至可能是两者的组合 隔离用户访问,只允许访问指定的服务    通过ADSL ...