简单使用webupload
简单使用webupload
引入必要文件
有些地方可能会用到jQuery,建议也引用进来
<!-- CSS文件 -->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
<!--js引入文件-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
body区域
<!-- Dom容器 -->
<div id="uploader-demo">
<div id="fileList" class="uploader-list"></div>
<div id="filePicker" >选择图片</div>
</div>
JavaScript
<script type="text/javascript">
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: '/admin/lib/webuploader/0.1.5/Uploader.swf',
// 文件接收服务端。
server: '{{route('upload')}}',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: {
id:'#filePicker',
//是否开启多个文件选择能力
multiple:false,
},
//文件上传时携带参数
formData: {
_token:'{{csrf_token()}}'
},
//文件上传时的表单名称
fileVal:'img',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
//上传成功时的回调方法
uploader.on('uploadSuccess',function (file,res) {
var src = res.url;
$('#inputImg').val(src)
$('#img').attr('src',src)
})