thinkphp3.2.3使用formdata的多文件上传
使用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的多文件上传的更多相关文章
- Java Web使用Html5 FormData实现多文件上传
前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法 ...
- jQuery用FormData对象实现文件上传以及如何通过ajax下载文件
之前在Vue的项目里面用到过文件上传,封装好的组件用起来比较顺手,查询Element-UI文档,十八般武器样样都有,一顿操作猛如虎,一看--跑偏了(⊙o⊙)-,我的意思就是用框架实现比较简单,但是如果 ...
- WebApi实现Ajax模拟Multipart/form-data方式多文件上传
前端页面代码: <input type="file" class="file_control" /><br /> <input t ...
- multipart/form-data请求与文件上传
要上传文件,需要用post方法,并且设置enctype为multipart/form-data. <form action="/upload" method="po ...
- multipart/form-data请求与文件上传的细节
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- vue axios 与 FormData 结合 提交文件 上传文件
---再利用Vue.axios.FormData做上传文件时,遇到一个问题,后台虽然接收到请求,但是将文件类型识别成了字符串,所以,web端一直报500,结果是自己大意了. 1.因为使用了new F ...
- tp5结合FormData实现ajax文件上传
或者使用: 下面使用jquery.form.js的表单插件来提交表单
- FormData+Ajax 实现多文件上传 学习使用FormData对象
FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...
- vue使用formData进行文件上传
本文为博主原创,未经允许不得转载 1.vue页面 <ux-form ref="formRef" layout="vertical"> <ux- ...
随机推荐
- 基本SQL语句使用方法
结构:增: create database 库名 charset 字符集: create table 表名称(字段名 类型 约束 ,字段名 类型 约束) not null 非空primary key ...
- GCN实现3
参考 : 首先看两篇论文,大概了解一下原理性的东西: GRAPH CONVOLUTIONAL NETWORKS THOMAS KIPF, 30 SEPTEMBER 2016 http://tkipf. ...
- src和href 如何做好seo 前端页面有那三层 AMD和CMD 规范的区别 渐进增强
1==>简述一下src与href的区别 src用于替换当前元素: href用于在当前文档和引用资源之间确立联系 2==>.谈谈以前端角度出发做好SEO需要考虑什么? a. 了解搜索引擎如何 ...
- RST复位报文
复位报文段: 一些特殊情况,TCP一端向另一端发送复位报文,以通知对方关闭链接或者重新建立链接. 产生复位报文的三种情况: 1. 当客户端访问一个不存在的端口时,目标主机会给客户端发送一个复位报文段. ...
- LG4782 「模板」2-SAT问题 2-SAT
问题描述 LG4782 题解 对于一个限制条件,建边如下: 如果\(x,-x\)在同一个强联通分量里,则不行,否则可以 构造方案:输出\(bel_i<bel_{i+n}\) \(\mathrm{ ...
- 使用jdk 容器镜像注意默认编码问题
最近在使用一个开源数据pipeline 处理的工具的时候,发现了jdk容器镜像编码的一些问题 以下是一个简单的描述 问题 使用了streamsets 工具,使用容器运行,默认使用了adoptopenj ...
- 数据结构——顺序队列(sequence queue)
/* sequenceQueue.c */ /* 顺序队列 */ #include <stdio.h> #include <stdlib.h> #include <std ...
- 【ECNU3386】Hunter's Apprentice(多边形有向面积)
点此看题面 大致题意: 按顺序给你一个多边形的全部顶点,让你判断是按顺时针还是逆时针给出的. 多边形有向面积 显然我们知道,叉积可以求出两个向量之间有向面积的两倍. 所以,我们三角剖分,就可以求出四边 ...
- 【2019.7.16 NOIP模拟赛 T1】洗牌(shuffle)(找环)
找环 考虑每次洗牌其实是一次置换的过程,而这样必然就会有循环出现. 因此我们直接通过枚举找出每一个循环,询问时只要找到环上对应的位置就可以了. 貌似比我比赛时被卡成\(30\)分的倍增简单多了? 代码 ...
- [题解向] 正睿Round409
\(\rm Link\) 然而泥萌没有权限是看不了题目的233. \(\rm T1\) 大概就是个map,脑残出题人认为(x,x)不属于有序二元组,我可qtmd.于是只拿了\(\rm 60pts\) ...