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);

});

});