这些内容都是我自己整理的一些小的初级知识,只是为了以后能回顾一下,觉得很差 请勿喷 ,也希望可以帮助到一些刚接触这个插件的人
引入步骤:
步骤1. 下载webUploader 链接 http://fex.baidu.com/webuploader/download.html
步骤2. 下载的文件包内整理需要的文件大概重要的有
这几个文件.
WebUploader.js 文件用来初始化一些ajax对象(具体做了那些事情可以去里面看注释)
WebUploader.css 是用来给上传按钮做一些美化样式
Uploader.swf 文件会在初始化的时候指定,所以其文件路径必须放在跟上面文件同路径,不然就要在上传的JS中自己指定这个文件的路径以确保其可以正常访初始化。
引入两个文件
<!-- 引入webupload css样式文件 -->
<link style="text/css" rel="stylesheet" href="<%=basePath%>plugins/webuploader/webuploader.css">
<!-- 引入webupload JS文件 -->
<script type="text/javascript" src="<%=basePath%>plugins/webuploader/webuploader.js"></script>
然后在代码中,图片上传的位置放入此容器,包含图片上传按钮以及图片的展示
<!-- 图片上传(百度插件) -->
<div id="uploader-demo2">
<!--用来存放item-->
<div id="filePicker2" style="float: left;" class="uploader-list fileList webuploader-container">选择图片</div>
</div>
<div id='zmy' align="left">
<img src="${pageContext.request.contextPath}/${var.ABOUT_IMAGE}" class="center-block" width="70" height="70" οnerrοr="this.src='<%=basePath%>static/images/nopicture.jpg';" alt="pic" />
<!-- 选择图片 上传活动 -->
</div>
<input type="hidden" name="ABOUT_IMAGE" id="ABOUT_IMAGE" value="${var.ABOUT_IMAGE}" />
这里要说下这个隐藏的Input的作用,因为webUploader是异步上传的插件,所以在文件上传到服务器里面后,后返回一个文件路径+文件名的字符串回来,这个路径是要记录下来,然后存储到数据库里面的。具体的赋值方法在
这里可以看到,这个JS文件是异步上传文件。在引入了上面的两个文件后,这个文件在WebUploader.js后面引入。还有一点要注意的是,这个隐藏的Input标。不要在放在他上面的DIV标签内部。因为上传后会把这个DIV覆盖掉。
这个属性标注的ID 会被创建成上传按钮。
SWF文件的路径,可以在这个JS文件中去指定。
文件接受服务端,就是我请求的控制器路径。
这一步就会把我刚才说的那个DIV的内容清空然后重新追加一个DIV。
文件上传失败后,在此步会显示出错误提示。
WebUploader是支持上传图片预览的 我们在异步请求的JS中配置预览图的大小
WebUploader 有很多很多功能等着我们去了解去发现,图片可以预览,可以压缩,兼容大部分的浏览器,设值图片上传大小 等等....
其实最重要的就是他把组件区分的很开,我们拓展的时候很方便。
我把最重要的上传文件配置的代码贴一下
/***
* 2018-4-12
* Mr.Li
* */
$(function() {
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: 'js/upload.js',
// 文件接收服务端。
server: 'about/upload.do',
// 选择文件的按钮。可选.
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
$list = $("#zjt");
$list.empty();
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail" >' +
'<img>' +
'<div class="info" style="display: none;" >' + file.name + '</div>' +
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件,可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
var thumbnailWidth = 320;
var thumbnailHeight = 160;
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress span');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo( $li )
.find('span');
}
$percent.css('width', percentage * 100 + '%' );
});
// 文件上传成功,给item添加成功class, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ) {
$( '#'+file.id ).addClass('upload-state-done');
});
// 文件上传失败,显示上传出错。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),
$error = $li.find('div.error');
// 避免重复创建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上传失败');
});
uploader.on('uploadSuccess',function(file,json){
$("#ABOUT_LOGO").val(json._raw);
});
// 完成上传完了,成功或者失败,先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
});