控制器代码

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上传相关推荐

  1. php用jquery-ajax上传多张图片限制图片大小

    php用jquery-ajax上传多张图片限制图片大小 /*** 上传图片,默认大小限制为3M* @param String $fileInputName* @param number $size*/ ...

  2. vue+element上传多张图片和图片展示

    前端: 文件上传使用el-upload <el-upload:http-request="uploadProductPic"accept="image/*" ...

  3. thinkphp3.2+cropper上传多张图片剪切图片

    实现效果截图 点加号可以继续上传第二张图片 代码部<--引入cropper相关文件--> <link rel="stylesheet" href="/h ...

  4. java代码实现多张图片/单张图片文件上传

    在项目中有这样的需求,有多个地方需要用到上传图片的功能,可以上传一张或多张照片.这时候自然想到了封装,来达到复用的目的.前后端分离开发,可以在上传文件后返回图片路径给前端,然后在最后整个需求完成后由前 ...

  5. 小程序一次性上传多个本地图片,上拉加载照片以及图片加载延迟解决之道

    一:小程序之一次性上传多个本地相片 最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述 最近做项目的时候要实现一个上 ...

  6. android相册拍照剪切上传封装,安卓,图片裁剪上传真机测试好使,打包后显示:无法保存裁剪的图像...

    var IMAGE_UNSPECIFIED = "image/*"; var PHOTOZOOM = 2; // 获取完图片返回key var PHOTOLAT = 1; // 剪 ...

  7. iOS -- 上传多张图片 后台(PHP)代码和上传一张的一样

    // 上传多张图片 - (void)send {// 设置初始记录量为0self.count = 0;self.upcount = 0;// 设置初始值为NOself.isUploadPictures ...

  8. java 移动页面中的图片上传_移动端图片操作——上传

    上传我们一般都是用"input[type=file]"控件.当你用此控件时,你就授权了网页和服务器访问对应的文件,就可以得到File对象. 友情提示在,在Android手机webv ...

  9. iOS-图片上传(第三方服务器)实现图片的上传和获取

    最简单的实现方式上传图片 //在调用相机中获取图片   [manager POST:naurl parameters:requestParms constructingBodyWithBlock:^( ...

  10. android webview 多文件上传,Android网页WebView图片文件上传的问题

    Android网页WebView图片文件上传的问题 发布时间:2020-07-13 22:48:15 来源:51CTO 阅读:5922 作者:拾荒者老大 在安卓下,webview上传图片点击是没用的, ...

最新文章

  1. Android 自定义View (入门 篇) 的使用
  2. 为啥不上SOA?中国企业的四大投资顾虑
  3. error: Your local changes to the following files would be overwritten by merge
  4. sublime使用笔记
  5. smartforms设置纸张打印格式
  6. MongoDB 数据迁移 备份 导入(自用)
  7. Ubuntu下安装NetBeans步骤和相关问题的解决方法
  8. struts1(一)流程分析
  9. Mi11Pro刷机记录
  10. 多媒体技术期末复习资料
  11. I2S 总线学习:I2S驱动WM8978
  12. linux performance test
  13. IM即时通讯-项目框架搭建(二)
  14. 2023年全国最新二级建造师精选真题及答案44
  15. 如何防止服务器记录上网信息,服务器怎么监控上网记录
  16. linux内存管理页面,【原创】(七)Linux内存管理 - zoned page frame allocator - 2
  17. 京瓷Kyocera ECOSYS M8130cidn 一体机驱动
  18. 职业规划测试软件,生涯规划工具
  19. 云服务器镜像是什么?
  20. 【c++基础】第二章 微观部分:面向对象之类的组成

热门文章

  1. debian 电脑屏幕放大镜 控制
  2. python通信工程定额_版通信工程费用及定额套用解读
  3. 奔图打印linux驱动下载,奔图P3405D打印机驱动下载
  4. 网页视频html转换ppt,ppt转web ppt可以转换为视频文件?
  5. html怎么添加视频链接,PPT怎么将超链接添加到视频图文教程
  6. ios下js复制到粘贴板_js实现复制到剪贴板功能,兼容所有浏览器
  7. 能使用firebug的火狐浏览器下载地址
  8. linux中安装无线网卡驱动,在linux下安装无线网卡驱动
  9. Playmaker节点工具使用(二)—Odin绘制支持
  10. 淘客帝国4.0免费版网页模板修改及n…