Web Uploader 的使用
一、引用css
{{-- webuploader上传样式 --}} <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css"/>
二、HTML部分的编写
<div class="row cl"> <label class="form-label col-xs-4 col-sm-3"><span class="c-red">* </span>文章封面:</label> <div class="formControls col-xs-4 col-sm-5"> <!-- 表单提交时的封面地址 方便服务器端的接收和存储 --> <input type="hidden" name="pic" id="pic" value="{{ config(‘up.pic‘) }}"> {{--Web Uploader 要绑定的--}} <div id="picker">上传文章封面</div> </div> {{--用于显示上传成功后的图片--}} <div class="formControls col-xs-4 col-sm-4"> <img src="" id="img" style="width: 50px;"> </div> </div>
三、引入js
<!-- webuploader上传js --> <script type="text/javascript" src="/webuploader/webuploader.js"></script>
四、js部分的编写
// 初始化Web Uploader var uploader = WebUploader.create({ // 选完文件后,是否自动上传 auto: true, // swf文件路径 swf: ‘/webuploader/Uploader.swf‘, // 文件接收服务端 上传PHP的代码 server: ‘{{ route(‘admin.article.upFile‘) }}‘, // 文件上传是携带参数 formData: { _token: ‘{{csrf_token()}}‘ }, // 文件上传是的表单名称 fileVal: ‘file‘, // 选择文件的按钮 pick: { id: ‘#picker‘, // 是否开启选择多个文件的能力,默认true multiple: false }, // 压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: true }); // 上传成功时的回调方法
//file 上传成功后关于文件的信息 ret 服务器端返回的json数据
uploader.on(‘uploadSuccess‘, function (file, ret) { console.log(file); console.log(ret); // 图片路径 let src = ret.src; // 给表单添加value值 $(‘#pic‘).val(src); // 给图片添加src $(‘#img‘).attr(‘src‘,src); });
五、服务器端代码的编写
public function upFile(Request $request) { //文件上传 //默认封面图片 $pic = config(‘upload.pic‘); if($request->hasFile(‘file‘)) { //上传 //参数2 配置的节点 名称 $result = $request->file(‘file‘)->store(‘‘,‘article‘); // dump($result); $pic = ‘/uploads/article/‘.$result; // dd($pic); } $post = $request->except(‘_token‘); $post[‘pic‘] = $pic; //添加 入库操作 // Article::create($post); return response()->json([‘status‘=>10001,‘msg‘=>‘上传成功!‘,‘src‘=>$pic]); }
六、留有bug
没有入库操作,因为不仅是上传文件,还有其他内容。。。。后续会更新。。。。
原文地址:https://www.cnblogs.com/zqblog1314/p/12708239.html
时间: 2024-10-05 21:22:38