ajax怎样上传多张图片,多图片Ajax上传
控制器代码
public function multiUploadImg( Request $request,$ordersn,$step,$stion){
// 重组数组,子函数
function reArrayFiles( $file_post ) {
$file_ary = array();
$file_count = count($file_post[‘name‘]);
$file_keys = array_keys($file_post);
for ($i=0; $i
foreach ($file_keys as $key) {
$file_ary[$i][$key] = $file_post[$key][$i];
}
}
return $file_ary;
}
$imgFiles = $_FILES[‘filesToUpload‘]; // 与前端页面中的 input name=“filesToUpload[]” 相对应
$uploadedFiles = array(); // 返回值
if(!empty($imgFiles))
{
$img_desc = reArrayFiles( $imgFiles );
$destinationPath = ‘uploads/‘; //public 文件夹下面建 storage/uploads 文件夹
$imgs=‘‘;//图片URL地址
foreach( $img_desc as $img )
{
$savedFile = $destinationPath.uniqid().$ordersn.‘.‘.pathinfo( $img[‘name‘],PATHINFO_EXTENSION );
move_uploaded_file($img[‘tmp_name‘],$savedFile);
$img[‘savedFile‘] = $savedFile ;
$imgs.=$savedFile.‘;‘;
array_push( $uploadedFiles,$img );
}
$allowed_extensions = ["png","jpg","gif"];
// TODO 判断文件类型
return [‘uploadedFiles‘ => $uploadedFiles ];
}
前端提交代码
class=" weui-uploader__input input_multifileSelect" type="file" multiple>
JS提交代码
$(document).ready(function () {
$(‘.input_multifileSelect‘).on(‘change‘,function () {
var stion = $(this).attr(‘data-for‘);
var showdiv = $(this).attr(‘data-show‘);
var step = 4;
var ajax_option = {
url: "{{url("/staff/file/uploads/{$data->ordersn}")}}/" + step + "/" + stion,// type : ‘post‘,默认是 form action
success: function (data) {
console.log(data);
showUploadedImgs(data.uploadedFiles,step,showdiv,"{{url("/staff/file/delete/{$data->ordersn}")}}",stion);
}
}
$(this).parent().ajaxSubmit(ajax_option);
});
});
ajax怎样上传多张图片,多图片Ajax上传相关推荐
- php用jquery-ajax上传多张图片限制图片大小
php用jquery-ajax上传多张图片限制图片大小 /*** 上传图片,默认大小限制为3M* @param String $fileInputName* @param number $size*/ ...
- vue+element上传多张图片和图片展示
前端: 文件上传使用el-upload <el-upload:http-request="uploadProductPic"accept="image/*" ...
- thinkphp3.2+cropper上传多张图片剪切图片
实现效果截图 点加号可以继续上传第二张图片 代码部<--引入cropper相关文件--> <link rel="stylesheet" href="/h ...
- java代码实现多张图片/单张图片文件上传
在项目中有这样的需求,有多个地方需要用到上传图片的功能,可以上传一张或多张照片.这时候自然想到了封装,来达到复用的目的.前后端分离开发,可以在上传文件后返回图片路径给前端,然后在最后整个需求完成后由前 ...
- 小程序一次性上传多个本地图片,上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片 最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述 最近做项目的时候要实现一个上 ...
- android相册拍照剪切上传封装,安卓,图片裁剪上传真机测试好使,打包后显示:无法保存裁剪的图像...
var IMAGE_UNSPECIFIED = "image/*"; var PHOTOZOOM = 2; // 获取完图片返回key var PHOTOLAT = 1; // 剪 ...
- iOS -- 上传多张图片 后台(PHP)代码和上传一张的一样
// 上传多张图片 - (void)send {// 设置初始记录量为0self.count = 0;self.upcount = 0;// 设置初始值为NOself.isUploadPictures ...
- java 移动页面中的图片上传_移动端图片操作——上传
上传我们一般都是用"input[type=file]"控件.当你用此控件时,你就授权了网页和服务器访问对应的文件,就可以得到File对象. 友情提示在,在Android手机webv ...
- iOS-图片上传(第三方服务器)实现图片的上传和获取
最简单的实现方式上传图片 //在调用相机中获取图片 [manager POST:naurl parameters:requestParms constructingBodyWithBlock:^( ...
- android webview 多文件上传,Android网页WebView图片文件上传的问题
Android网页WebView图片文件上传的问题 发布时间:2020-07-13 22:48:15 来源:51CTO 阅读:5922 作者:拾荒者老大 在安卓下,webview上传图片点击是没用的, ...
最新文章
- Android 自定义View (入门 篇) 的使用
- 为啥不上SOA?中国企业的四大投资顾虑
- error: Your local changes to the following files would be overwritten by merge
- sublime使用笔记
- smartforms设置纸张打印格式
- MongoDB 数据迁移 备份 导入(自用)
- Ubuntu下安装NetBeans步骤和相关问题的解决方法
- struts1(一)流程分析
- Mi11Pro刷机记录
- 多媒体技术期末复习资料
- I2S 总线学习:I2S驱动WM8978
- linux performance test
- IM即时通讯-项目框架搭建(二)
- 2023年全国最新二级建造师精选真题及答案44
- 如何防止服务器记录上网信息,服务器怎么监控上网记录
- linux内存管理页面,【原创】(七)Linux内存管理 - zoned page frame allocator - 2
- 京瓷Kyocera ECOSYS M8130cidn 一体机驱动
- 职业规划测试软件,生涯规划工具
- 云服务器镜像是什么?
- 【c++基础】第二章 微观部分:面向对象之类的组成
热门文章
- debian 电脑屏幕放大镜 控制
- python通信工程定额_版通信工程费用及定额套用解读
- 奔图打印linux驱动下载,奔图P3405D打印机驱动下载
- 网页视频html转换ppt,ppt转web ppt可以转换为视频文件?
- html怎么添加视频链接,PPT怎么将超链接添加到视频图文教程
- ios下js复制到粘贴板_js实现复制到剪贴板功能,兼容所有浏览器
- 能使用firebug的火狐浏览器下载地址
- linux中安装无线网卡驱动,在linux下安装无线网卡驱动
- Playmaker节点工具使用(二)—Odin绘制支持
- 淘客帝国4.0免费版网页模板修改及n…