双11刚刚过去,各位不是自己剁手就是被秀恩爱秀一脸,作为一个Not find object的Java程序员来说,还是老实上班比较好吧。毕竟,1没钱2没女朋友的我拿什么晒朋友圈?是dota暴走还是满屋子的高达、手办和游戏?又或者是自己DIY的机箱?没卖点啊!!!!
好了,每周一吐槽进入正题。今天是记录一个比较简单的web uploader的上传,老样子,写给同样出来混的新人菜鸟,能帮上忙真是太好了。也是求老鸟指教。
百度有个上传插件叫web uploader(同样,提供官网地址http://fex.baidu.com/webuploader/),这个还是在我们现在项目的原有插件uploadify出了点兼容性的小问题不能用了之后才知道的,嗯!百度居然还在做插件!!!我以为他就只有一个容易出问题的搜索框呢(笑)。因为我们主要是用在上传用户头像这一块并且是写在JS里的,所以1、简单到不能再简单,所以我看了半天API也没看懂,最后自己琢磨出来的。2、仅适用于JS,什么用Java传输啦,php之类的抱歉,你们要失望了,这只是个菜鸟写的,没什么技术含量。
那就开始吧,首先,打开webstone。。。。。扯的有点早,直接开始。
首先,在官网下载压缩包,实际上是进入Github下载,百度是不是抱了大腿(笑),压缩包直接打开就可以放入项目
然后在页面上导入JS
<script type="text/javascript" src="${basepath}/webuploader-0.1.5/webuploader.nolog.min.js"></script>
注意导入min.js格式的压缩文件,这个以前上课老师说过,JS引入要导min文件,可惜我忘到九霄云外去了。
然后接下来就简单了,
$(function(){
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: '${basepath}/webuploader-0.1.5/Uploader.swf',
// 文件接收服务端。
server: server,//这里根据需要的上传地址自行上传
//设置文件上传域的name
failVal: 'file',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: "#filePicker",//这地方说白了就是入口,你需要在哪添加上传按钮,就把拿个元素的id放过来,有可能是input,也可能是a
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
},
//文件上传方式,POST或者GET
method:'POST',
//这里是控制单个文件上传文件大小
fileSingleSizeLimit: maxSize * 1024 * 1024,
//文件上传请求的参数表,每次发送都会发送此对象中的参数
formData:{'token':uptoken},
});
//这里是上传初始化后动作,括号里第一个参数是事件名称,这是是成功事件
uploader.on('uploadSuccess', function (file ,response) {
eval(callback(file ,response));//这里我做了一个回掉,获取服务器回传的数据,因为上传的是一个图片,这是是对服务器回传的图片哈希码进行处理
})
//上传失败事件,我只是加了一个日志打印,一般都是会提示用户上传失败了,有个自己网站设计的弹框什么的
uploader.on('uploadError', function(file, reason){
alert("上传失败");
console.log(reason)
})
})
这里还把页面元素拿出来,随你是jsp还是html,各取所需,但dom元素是一样的
<div class="row">
<div class="form-group">
<label class="col-sm-3 control-label">头像</label>
<input type="hidden" name="face" id="face" value="">
<div class="col-sm-5">
<a id="filePicker">上传头像</a>
<p class="info" style="margin-top:20px;">支持JPEF, PNG文件,最大1M。图片尺寸为:(1:1)最小300px</p>
<div class="uploadedImg">
<img src="${basepath}/static/images/common/user.png" id="cover_show">
</div>
</div>
</div>
</div>
一个简单的上传图片就好了,没什么难的,看不懂就多试试,亲手试试就出来了。