欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

php fileinput实现多图片批量上传

程序员文章站 2022-05-30 08:34:50
...
<script src="__LIB__/bootstrap/js/jquery.min.js"></script>
<script src="__LIB__/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="__LIB__/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="__LIB__/fileinput/css/fileinput.min.css">
<script src="__LIB__/fileinput/js/fileinput.js"></script>
<script src="__LIB__/fileinput/js/locales/zh.js"></script>

直接上代码了。上面的是要引入的bootstrap,和fileinput文件

下面是前台样式+js

<div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">商品图片详情:</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="file" class="file" id="img_url1" name="image_data[]" accept="image/*" multiple></div>
        </div>
        <script>
            // var input_value = $(".input-text").val()
            fodderType = function() {
                return $("#ww").val();

            };
            //这是我要携带的参数,可以不写
             fodderTypes = function() {
                return $("#ws").val();
                
            };
            $("#img_url1").fileinput({
                language: 'zh',
                uploadUrl: "{:Url('/admin/xiangce/upload/')}",
                uploadAsync: false, //设置上传同步异步 此为同步
                maxFileSize: 50000,
                uploadExtraData: function(previewId, index) {   //额外参数的关键点
                    var obj = {};
                    obj.gid = fodderType();
                    obj.tuname = fodderTypes();
                    console.log(obj);
                    return obj;
                }
            });
        </script>

控制器所需方法。

public function upload(){
        //$request = Request::instance();
        //$goods_data = $request->param();
        foreach($_FILES["image_data"]["name"] as $key=>$data){
            $img_name[] = $data;
           
        }
        foreach($_FILES['image_data']['tmp_name'] as$k=>$v) {
            $img_url[]=$v;

        }
        for($i=0;$i<count($img_name);$i++){
            $path = './tmp/uploads/' . $img_name[$i];
            $v=$img_url[$i];
            move_uploaded_file($v,$path);

        }

        return 1; //这个返回值必须要

    }


附个图:

php fileinput实现多图片批量上传

需要fileinput+bootstrap文件请点击下载。。

相关标签: 图片上传