先上效果图：
图片上传用到了以下技术：
前端用的是easyui、webuploader，后端用的是java。
直接贴关键代码
1、js部分代码
var datagridImage = [],uploader;
// 优化retina, 在retina下这个值是2
var ratio = window.devicePixelRatio || 1;
var thumbnailWidth = 110 * ratio,thumbnailHeight = 110 * ratio;
$(function() {
var gridImage = $('#gridImage').datagrid({
toolbar: '#tbImage',
data: datagridImage,
idField:'id',
columns: [[
{ field: 'ck', checkbox: true },
{field: 'id', title: 'ID'},
// {field: 'url', title: '图片', width:110,
// formatter: function(value,row,index){
// return '';
// }
// },
{field: 'name_old', title: '原名称'},
{field: 'name_new', title: '新名称',editor:'text',width:200},
{field: 'file_sate', title: '状态'},
{field: 'operate', title: '操作',
formatter: function(value,row,index){
var html = '预览';
return html;
}
},
]]
});
gridImage.datagrid('enableCellEditing').datagrid('gotoCell', {
index: 0,
field: 'id'
});
//上传配置
uploader = WebUploader.create({
// swf文件路径
swf: '#(static)/admin/javascript/webuploader/Uploader.swf',
// 文件接收服务端。
server: '#(ctx)/admin/common/uploadPic',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#file-select',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false
});
uploader.onFileQueued = function( file ) {
// fileCount++;
// fileSize += file.size;
//
// if ( fileCount === 1 ) {
// $placeHolder.addClass( 'element-invisible' );
// $statusBar.show();
// }
addFile( file );
// setState( 'ready' );
// updateTotalProgress();
};
uploader.on('uploadBeforeSend', function (obj, data) {
//传入表单参数
data = $.extend(data, {
"type": "book"
});
});
uploader.on('uploadSuccess', function( file ,response ) {
//$( '#'+file.id ).find('p.state').text('已上传');
var rows = $("#gridImage").datagrid('getData').rows;
var length = rows.length;
var rowindex;
for (var i = 0; i < length; i++) {
if (rows[i]['id'] == file.id) {
rowindex = i;
break;
}
}
$('#gridImage').datagrid('updateRow',{
index: rowindex,
row: {
file_sate: '已完成',
url:response.url
}
});
});
$('#file-upload').bind('click', function(){
uploader.upload();
});
$("#author_id").combobox({
url:'#(ctx)/admin/system/book/authorList',
valueField:'id',
textField:'name_short',
mode:'remote',
multiple:true,
loadFilter: function(data){
return data.rows;
}
});
});
function addFile( file ) {
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
console.log('不能预览');
return;
}
datagridImage.push({id:file.id,url:'',url:src,name_old:file.name,name_new:file.name,file_sate:'准备中'});
$('#gridImage').datagrid({
data: datagridImage
});
}, thumbnailWidth, thumbnailHeight);
}
html部分代码：
后台上传文件代码(用到了jfinal框架)：
@Clear
public void uploadPic(){
Date date = new Date();
SimpleDateFormat folderNameSDF = new SimpleDateFormat("yyyyMMdd");
SimpleDateFormat newFileNameSDF = new SimpleDateFormat("HHmmssSSS");
String folderName = folderNameSDF.format(date);
String newFileName = newFileNameSDF.format(date);
UploadFile file = this.getFile("file");
String uploadPath = "/upload/image/";
String type = getPara("type","");
if(StrUtil.isNotEmpty(type)){
uploadPath = "/upload/" + type + "/image/";
}
if(StrUtil.isNotEmpty(folderName)){
uploadPath = uploadPath + folderName + "/";
}
//创建目录
FileUtil.mkdir(PathKit.getWebRootPath()+uploadPath);
String fileName = file.getFileName();
String fileExtensions = fileName.substring(fileName.lastIndexOf(".") + 1);
if(StrUtil.isNotEmpty(newFileName)){
fileName = newFileName + "." + fileExtensions;
}
//文件重命名
file.getFile().renameTo(new File(PathKit.getWebRootPath()+uploadPath+"/"+fileName));
renderJson(Result.Success().put("url",uploadPath+fileName).put("name",file.getFileName()));
}
需要注意的是，除了easyui、webuploader还需要引入datagrid-cellediting.js，名称这一块是可以编辑的。