Web Uploader 文件上传的使用
2021-03-22 08:25
标签:返回 能力 css color token min swf att label 没有入库操作,因为不仅是上传文件,还有其他内容。。。。后续会更新。。。。 Web Uploader 文件上传的使用 标签:返回 能力 css color token min swf att label 原文地址:https://www.cnblogs.com/zqblog1314/p/12708239.htmlWeb 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
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
文章标题:Web Uploader 文件上传的使用
文章链接:http://soscw.com/index.php/essay/67524.html