<link href="${ctxStatic}/jqGrid/4.6/css/ui.jqgrid.css" type="text/css" rel="stylesheet" />
<script src="${ctxStatic}/jqGrid/4.7/js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="${ctxStatic}/jqGrid/4.7/js/jquery.jqGrid.extend.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctxStatic}/webuploader/webuploader.js"></script>
<link rel="stylesheet" type="text/css" href="${ctxStatic}/webuploader/webuploader.css" />
//每个uploader 的实例都给class 属性upload_container, 这样通过类选择器的each函数我们
//就可以遍历每个uploader 并且实例化了
var uploader=new Array($('.upload_container').length);
$('.upload_container').each(function(index) {
var list = $(this).find('#fileList');
var filePicker = $(this).find('#filePicker');//上传按钮实例
var btn = $(this).find('#ctlBtn');//上传按钮实例
//此处为webuploader的实例化过程,加了额下标index
uploader[index] = WebUploader.create({
auto : true,
fileNumLimit : 1,
fileSizeLimit : 2 * 1024 * 1024,
fileSingleSizeLimit : 2 * 1024 * 1024,
method : 'POST',
thread : 100,
disableGlobalDnd : true,
server : '${ctx}/pro/proGoods/FileUpload',
accept: { // 只允许选择图片文件。
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
},
pick : { id : filePicker },
formData :{ mydata : '2' }
});
//同理,我们其他的函数也要加上index下标
//生成缩略图
uploader[index].on('fileQueued',function(file) {
var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
+ '<img>'
+ '<div class="info">'
+ '</div>' + '</div>'),
$img = $li.find('img');
list.append($li);
// 创建缩略图
// 如果为非图片文件,可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader[index].makeThumb(file,function(error,src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src',src);
filePicker.hide();
}, 66, 66);
});
// 文件上传过程中创建进度条实时显示。
uploader[index].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[index].on( 'uploadSuccess', function( file,response ) {
var $li = $( '#'+file.id ),
$msg = $li.find('div.info');
// 避免重复创建
if ( !$msg.length ) {
$msg = $('<div class="info"></div>').appendTo( $li );
}
if(response.result){
$msg.text('上传成功!');
try {
if(response.data){
$li.parent().parent().find("input").val(response.data);
console.log(response.data);
}
} catch (ex) {
$li.parent().parent().parent().find('img').eq(0).attr("style", "display:none;")
console.log("捕获到异常,但不影响程序运行!异常为domExecept");
}
}else{
$msg.text('上传失败!');
}
});
//文件上传前
uploader[index].on( 'uploadBeforeSend', function( object, data,header ) {
data.remark = $("#remark").val();
})
// 完成上传完了,成功或者失败,先删除进度条。
uploader[index].on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
// 文件上传失败,显示上传出错。
uploader[index].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('上传失败!');
});
});
--------------------html----------------------
<div id="uploader-demo" class="upload_container">
<input type="hidden" id="picture" name="GoodsCatRelation.picture" value="${goodsCategory.goodsCatRelation.picture}"/>
<div id="fileList"></div>
<div id="filePicker" style="width: 95px;float: left;">选择图片</div>
</div>
--------------------------------------后台--------------------------------------
/**
* 商品相册上传
*
* @param request
*/
@RequestMapping(value = "FileUpload")
public void FileUpload(HttpServletRequest request, HttpServletResponse response, Model model, String name,
String filename, @RequestParam("file") MultipartFile fileUpload) {
// 转换MultipartFile类型为file类型
CommonsMultipartFile cf = (CommonsMultipartFile) fileUpload;
DiskFileItem fi = (DiskFileItem) cf.getFileItem();
File files = fi.getStoreLocation();
// 文件名
name = DateUtils.formatDate(new Date(), "yyyyMMddhhmmss") + new Random().nextInt(1000);
// 得到上传的文件名
String originalFilename = fileUpload.getOriginalFilename();
// 拼接文件名
name += originalFilename.substring(originalFilename.lastIndexOf("."));
// 文件保存路径
String savePath = "files/www/files/";
String mysqlPath = "";// 写入数据库
String dirName = "goods/images/" + DateUtils.formatDate(new Date(), "yyyy-MM-dd") + "/";
savePath += dirName;
mysqlPath += dirName;
File file = new File(savePath);
// 生成输入输出流
InputStream in = null;
OutputStream out = null;
// 判断文件是否存在
if (!file.exists() && !file.isDirectory()) {
file.mkdirs();
file.setExecutable(true, false);// 设置可执行权限
file.setReadable(true, false); // 设置可读权限
file.setWritable(true, false); // 设置可写权限
}
try {
// 把文件导入输入流
in = new FileInputStream(files);
// 生成保存的文件
File saveFile = new File(file, name);
// 生成输出流
out = new FileOutputStream(saveFile);
// 把输入流copy到输出流
IOUtils.copy(in, out);
} catch (Exception e) {
} finally {
// 关闭输入输出流
IOUtils.closeQuietly(in);
IOUtils.closeQuietly(out);
logger.info(savePath);
}
// 设置返回的json字符串
response.setContentType("text/xml;charset=utf-8");
PrintWriter outPrint;
}
在jsp中如何多实例使用百度上传控件
最新推荐文章于 2020-08-23 19:11:33 发布