多图片Ajax上传

Posted 2022-10-14 catyxiao

控制器代码

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<$file_count; $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 ];
    

前端提交代码

<form method="post" enctype="multipart/form-data">
   <input name="filesToUpload[]" accept="image/*" id="settlement_authorize" data-show="showsettlement_authorize" data-for="settlement_authorize"
           class=" weui-uploader__input input_multifileSelect" type="file" multiple>
</form>

JS提交代码

<script>
    $(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);
        );

    );
</script>