webUploader百度上传控件使用心得以及jfinal文件上传保存

这里先知道怎么用吧，后期想拓展再深入研究（主要是我也没看明白）。

首先：js文件引入

<script src="${CONTEXT_PATH}/Resource/scripts/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="${CONTEXT_PATH}/Resource/baiduupload/webuploader.css">
<script type="text/javascript" src="${CONTEXT_PATH}/Resource/baiduupload/webuploader.js"></script>

然后定义Dom：

<th>近期照片:</th>
<td colspan="1">
<div id="thelist" class="uploader-list"></div>
</td>
<td>
<div class="btns">
<div id="picker" >选择图片</div>
<div id="ctlBtn" class="webuploader-pick" onmouseover="mouseO();" onmouseout="mouseOt();" >开始上传</div>
</div>
<input id="lb" name="photos" type="hidden" runat="server" />
</td>
//这里：runat="server"没必要写，是回交给服务器

最后，就是copy他的js

<script type="text/javascript">
// 文件上传
jQuery(function () {
var $ = jQuery,
$list = $('#thelist'),
$btn = $('#ctlBtn'),
state = 'pending',
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 150 * ratio,
thumbnailHeight = 150 * ratio,
uploader;

uploader = WebUploader.create({

// 不压缩image
resize: false,

// swf文件路径
swf: 'webUploader/Uploader.swf',

// 文件接收服务端。
server: '${MH}/expertInfo/savePhotos',
fileNumLimit: 1,//设置可上传文件数量

// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
// 只允许选择文件，可选。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});

// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div id="info" runat="server">' + file.name + '</div>' +
'<p class="state">等待上传...</p>' +
'</div>'
),
$img = $li.find('img');

$list.append($li);

// 创建缩略图
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 .progress-bar');

// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find('.progress-bar');
}

$li.find('p.state').text('上传中');

$percent.css('width', percentage * 100 + '%');
});

uploader.on('uploadSuccess', function (file) {
$('#' + file.id).find('p.state').text('已上传');
});

uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
});

uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut();
});

uploader.on('all', function (type) {
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
}

if (state === 'uploading') {
$btn.text('暂停上传');
} else {
$btn.text('开始上传');
}
});

$btn.on('click', function () {
if (state === 'uploading') {
uploader.stop();
} else {
uploader.upload();
}
$("#lb").val($("#info").text());//这里是把文件名赋值给标签
});

});
//下面是鼠标放上去的效果，可以无视
function mouseO() {
$("#ctlBtn").addClass("webuploader-pick-hover");
}

function mouseOt() {
$("#ctlBtn").removeClass("webuploader-pick-hover");
}
</script>

关于后台的处理：我是使用的jfinal，后台直接获取文件，废话不多说：

/**
* 处理图片方法
*/
public String savePhotos(){
String fileName ="";
UploadFile  uploadFile = this.getFile();
fileName = uploadFile.getOriginalFileName();
System.out.println(fileName);
//定义位置：
String savePath = PathKit.getWebRootPath()+"\\upload\\";
//获取图片后缀
String type = fileName.substring(fileName.lastIndexOf("."));
fileName = UUID.randomUUID()+type;  //随机生成文件名字
//创建文件夹
File filePath = new File(savePath);
if(!filePath.exists()){//判断是否存在
filePath.mkdirs();
}
String dest = savePath+"\\"+fileName;
System.out.println(dest);
//创建文件
File newFile = new File(dest);
//获取文件
File file = uploadFile.getFile();
//实例化文件复制类
FileService fileService = new FileService();
try{
newFile.createNewFile();

}catch(Exception e){
e.printStackTrace();
}
//开始文件复制
fileService.fileChannelCopy(file,newFile);
file.delete();
//定义数据库存储路径
String savePathForDateBase="/upload/"+fileName;
return savePathForDateBase;
}

这里有关于fileService的调用，这里我写了一个接口：

public class FileService {

public void fileChannelCopy(File s,File t){

FileInputStream fi = null;

FileOutputStream fo = null;

FileChannel in = null;

FileChannel out = null;

try{
fi = new FileInputStream(s);

fo = new FileOutputStream(t);

in = fi.getChannel();//得到对应的文件通道

out = fo.getChannel();//得到对应的文件通道

in.transferTo(0, in.size(), out);//连接两个通道，并且从in中开始读取写入到out通道

}catch(Exception e){
e.printStackTrace();
}finally{
try{
fi.close();

in.close();

fo.close();

out.close();
}catch(Exception e){
e.printStackTrace();
}
}

}

}

这里要提醒自己一点：进行上传文件的时候，只有该文件夹存在的条件下才能将文件进行创建。！

这里我定义为有返回值是因为我需要图片的存储地址存到数据库中，需要的时候前台直接调取；

这里提一点，img标签无法加载本地绝对路径图片，不知为何。Chrome貌似出于安全考虑不让加载。所以只能加载服务端了。