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=" 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 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'), ],