Webupload实现异步上传图片

1 将 Webupload压缩包放在public下 或下载安装包

前端页面代码

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title></title>
  6     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  7     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  8     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9     <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
 10     <script type="text/javascript" src="/webuploader/webuploader.js"></script>
 11 
 12 {{--前端validation    验证--}}
 13     <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
 14     <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
 15     <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
 16 </head>
 17 <body>
 18 
 19 <form role="form" method="post" action="{{url('addData')}}" enctype="multipart/form-data" id="signupForm">
 20     @csrf
 21 
 22     <div class="form-group">
 23         <!--dom结构部分-->
 24         <div id="uploader-demo">
 25             <!--用来存放item-->
 26             <div id="fileList" class="uploader-list"></div>
 27             <div id="filePicker">选择图片</div>
 28             <input type="hidden" name="pic" id="imgpic" value="">
 29             <img src="" id="pics" style="width: 100px;height: 50px">
 30         </div>
 31 
 32     </div>
 33     <div class="form-group">
 34         <label for="name">标题</label>
 35         <input type="text" class="form-control" id="name"
 36                placeholder="请输入标题" name="title">
 37     </div>
 38     <div class="checkbox">
 39         <label for="name">是否可见</label>
 40            是：<input type="radio" name="show" value="0">
 41           否： <input type="radio" name="show" value="1">
 42 
 43     </div>
 44     <button type="submit" class="btn btn-default">提交</button>
 45 </form>
 46 <script type="text/javascript">
 47     // 初始化Web Uploader
 48     var uploader = WebUploader.create({
 49 
 50         // 选完文件后，是否自动上传。
 51         auto: true,
 52 
 53         // swf文件路径
 54         swf: '/Uploader.swf',
 55         formData:{
 56             _token:"{{csrf_token()}}"
 57         },
 58 
 59         // 文件接收服务端。
 60         server: '{{route('addImage')}}',
 61         fileVal:'pic',
 62 
 63         // 选择文件的按钮。可选。
 64         // 内部根据当前运行是创建，可能是input元素，也可能是flash.
 65         pick: '#filePicker',
 66 
 67         compress:{
 68             width: 200,
 69             height: 200,
 70             // 图片质量，只有type为`image/jpeg`的时候才有效。
 71             quality: 100,
 72             // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
 73             allowMagnify: false,
 74 
 75             // 是否允许裁剪。
 76             crop: false,
 77 
 78             // 是否保留头部meta信息。
 79             preserveHeaders: true,
 80 
 81             // 如果发现压缩后文件大小比原来还大，则使用原来图片
 82             // 此属性可能会影响图片自动纠正功能
 83             noCompressIfLarger: false,
 84 
 85             // 单位字节，如果图片大小小于此值，不会采用压缩。
 86             compressSize: 0
 87         },
 88 
 89         // 只允许选择图片文件。
 90         accept: {
 91             title: 'Images',
 92             extensions: 'jpg,jpeg,png',
 93             mimeTypes: 'image/*'
 94         },
 95 
 96     });
 97 
 98     //上传成功
 99     uploader.on( 'uploadSuccess', function( file,ret ) {
100         $("#imgpic").val(ret.pic)
101         $("#pics").attr('src',ret.pic)
102 
103     });
104
105     $("#signupForm").validate({
106         rules: {
107             title: {
108                 required: true,
109                 minlength: 3,
110             },
111         },
112         messages: {
113             title: {
114                 required: "请输入密码",
115                 minlength: "密码长度不能小于 3 个字符",
116             },
117         },
118         submitHandler:function(form){
119 
120             form.submit();
121         }
122     })
123 
124 
125 </script>
126 
127 </body>
128 </html>

2 通过路由进入后端 进行图片上传

控制器伪代码

    public function addImage(Request $request){
        $file=$request->file('pic')->store('','pic');
        $pic="/uplodes/".$file;
        return ['code'=>200,'pic'=>$pic];
    }

 

3  laravel框架中需自己定义上传图片的路由

Route::post("addImage",'ImageController@addImage')->name('addImage');

 

配置上传路径 在config下的filesystems.php中配置

  'pic' => [
            'driver' => 'local',
            'root' => public_path('uploads/pic'),
        ],

 

posted @ 2021-01-27 12:45  Conqueror·  阅读(181)  评论(0)  编辑  收藏  举报