码迷,mamicode.com
首页 > Web开发 > 详细

多图片Ajax上传

时间:2019-09-11 15:23:28      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:rip   inf   前端   att   turn   控制   cep   enc   img   

控制器代码

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上传

标签:rip   inf   前端   att   turn   控制   cep   enc   img   

原文地址:https://www.cnblogs.com/catyxiao/p/11506273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!