webuploader 文件上传

第一步

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="/webuplader/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="/webuplader/webuploader.js"></script>

第二步 html 部分

<tr><td>图片</td><td><div id="uploader" class="wu-example"><!--用来存放文件信息--><div id="thelist" class="uploader-list"></div><div class="btns"><div id="picker">选择文件</div><input type="hidden" value="1" name="article_img" id="hidimg"><img src="/img/123.jpg" alt="" width="100px" height="100" id='image'></div></div></td>
</tr>

第三步初始化以及上传成功回调

// 初始化Web Uploader
var uploader = WebUploader.create({// 选完文件后，是否自动上传。auto: true,// swf文件路径swf: '/webuplader/Uploader.swf',// 文件接收服务端。server: '{{route('articleFile')}}',formData:{_token : '{{csrf_token()}}'},fileVal:'file',// 选择文件的按钮。可选。<div id="uploader" class="wu-example">// 内部根据当前运行是创建，可能是input元素，也可能是flash.pick: '#picker',// 只允许选择图片文件。accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}
});//上传成功回调方法
uploader.on('uploadSuccess',function (file,ret){console.log(ret.data)//图片路径let src = ret.data//页面同步展示图片$('#image').prop('src',ret.data);//赋值给隐藏域let img = $('#hidimg').val(src);console.log($('#hidimg').val());})

第四步控制器

config/filesystems.php 里的disks

添加以下代码其余不用

'articles' => ['driver' => 'local','root'   => public_path('img')
],

$file = $request->file('file')->store('','articles');
$pic = '/img/'.$file;
return ['code'=>0,'message'=>'上传成功','data'=>$pic];

补充：：上传成功图片预览修改图片预览方法上传成功回调方法修改

需要提前设置一个空的div盒子并赋予id

<div id="uploader" class="wu-example"><!--用来存放文件信息--><div id="thelist" class="uploader-list"></div><div class="btns"><div id="picker">选择文件</div><input type="hidden" value="1" name="pic" id="hidimg">
{{--                <img src="" alt="" width="100px" height="100" id='image'>--}}<div id="img"></div> ！！！这里</div></div>

//上传成功回调方法
uploader.on('uploadSuccess',function (file,ret){//预览图var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' +'<img>' +'<div class="info">' + file.name + '</div>' +'</div>'),$img = $li.find('img');// $list为容器jQuery实例$('#img').append( $li );// 创建缩略图// 如果为非图片文件，可以不用调用此方法。// thumbnailWidth x thumbnailHeight 为 100 x 100uploader.makeThumb( file, function( error, src ) {if ( error ) {$img.replaceWith('<span>不能预览</span>');return;}$img.attr( 'src', src );}, 100, 100 );//图片路径let src = ret.dataconsole.log(src)//页面同步展示图片// $('#image').prop('src',ret.data);//赋值给隐藏域let img = $('#hidimg').val(src);console.log($('#hidimg').val());})

webuploader 文件上传相关推荐

jquery组件WebUploader文件上传用法详解
这篇文章主要为大家详细介绍了jquery组件WebUploader文件上传用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
文件上传插件WebUploader的使用
文件上传插件WebUploader的使用插件描述: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里 ...
webuploader java_使用WebUploader实现上传文件功能（一）
写在前面: 文件上传方式很多的,对于大文件的上传,在本次项目中也有涉及,主要是用了分片断点上传大文件.所以就去了解了一下WebUploader,先从简单的上传文件开始吧. 在代码中写注释,这样看的比较 ...
WebUploader大文件上传解决方案
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
本地文章上传阿里云文件上传
文章目录一. 本地文件上传的步骤 1.1 实现文件上传的service 1.2 实现文件上传controller 1.3 在application.yml配置即可 1.4 配置静态资源服务目录映射 ...
前端大文件上传解决方案
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
浏览器批量大文件上传下载
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
用openoffice+jodconverter+webuploader+pdf.js实现文件上传、在线预览功能
一.背景最近公司一个项目要实现一个文件上传以及多文档在线预览的功能,之前一直做无线工具开发的,没有涉及到这些东西.另外项目组缺java开发人员,而且自己也只是一个半吊子前端加小半吊子java开发人员 ...
WebUploader 设置单个文件上传
1.导入控件样式文件 <link rel="stylesheet" type="text/css" href="__PUBLIC__/stati ...

webuploader 文件上传

webuploader 文件上传相关推荐

最新文章

热门文章