多图片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<$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>

相关文章

$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方...
form表单提交的几种方式 表单提交方式一:直接利用form表单提...
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于...
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在...
文章浏览阅读2.2k次。/************************** 创建XML...
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送...