webuploader java版本_webuploaderjava版 上传图片

问题：

1、上传单张

2、修改图片的时候覆盖原来的图片

jsp+springmvc

代码如下

前台代码

图片展示:

选择图片

var baseUrl = '${pageContext.request.contextPath }';

//图片上传demo

jQuery(function() {

var $ = jQuery,

$list = $('#fileList'),

// 优化retina, 在retina下这个值是2

ratio = window.devicePixelRatio || 1,

// 缩略图大小

thumbnailWidth = 100 * ratio,

thumbnailHeight = 100 * ratio,

// Web Uploader实例

uploader;

// 初始化Web Uploader

uploader = WebUploader.create({

// 自动上传。

auto: true,

// swf文件路径

swf: baseUrl+'js/Uploader.swf',

// 文件接收服务端。

server: baseUrl+'/files/addImg',

// 选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick: '#filePicker',

// 图片质量，只有type为`image/jpeg`的时候才有效。

quality: 90,

// 只允许选择文件，可选。

fileNumLimit: 1,

accept: {

title: 'Images',

extensions: 'gif,jpg,jpeg,bmp,png',

mimeTypes: 'image/*'

}

});

// 当有文件添加进来的时候

uploader.on( 'fileQueued', function( file ) {

var $li = $(

'

' +

'' +

'

' + file.name + '

' +

'

'

),

$img = $li.find('img');

// $list为容器jQuery实例

$list.html("");

$list.append( $li );

// 创建缩略图

// 如果为非图片文件，可以不用调用此方法。

// thumbnailWidth x thumbnailHeight 为 100 x 100

uploader.makeThumb( file, function( error, src ) {

if ( error ) {

$img.replaceWith('不能预览');

return;

}

$img.attr( 'src', src );

}, thumbnailWidth, thumbnailHeight );

$("#filePicker").on('click',function(){

uploader.removeFile(file);

});

});

// 文件上传过程中创建进度条实时显示。

uploader.on( 'uploadProgress', function( file, percentage ) {

var $li = $( '#'+file.id ),

$percent = $li.find('.progress span');

// 避免重复创建

if ( !$percent.length ) {

$percent = $('

.appendTo( $li )

.find('span');

}

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

});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。

//注意我写样式了啊response:服务端返回的数据

uploader.on( 'uploadSuccess', function( file,response) {

$( '#'+file.id ).addClass('upload-state-done');

//console.info(response);

$("#upInfo").html(""+response._raw+"");

});

// 文件上传失败

uploader.on( 'uploadError', function(file) {

var $li = $( '#'+file.id ),

$error = $li.find('div.error');

alert(reson);

// 避免重复创建

if ( !$error.length ) {

$error = $('

}

$error.text('上传失败!');

});

// 完成上传完了，成功或者失败，先删除进度条。

uploader.on( 'uploadComplete', function( file ) {

$( '#'+file.id ).find('.progress').remove();

});

});

后台代码

@RequestMapping(value = "/addImg")

public void upload(@RequestParam(value = "file", required = false) MultipartFile file,HttpServletResponse response, HttpServletRequest request, ModelMap model) {

COM_REPORT_PATH=rb.getString("COM_REPORT_PATH");

System.out.println("开始");

String path =COM_REPORT_PATH+"/upload/";

String fileName = file.getOriginalFilename();

// String fileName = new Date().getTime()+".jpg";

System.out.println(path);

File baseFile = new File(path);

File targetFile = new File(baseFile, fileName);

long size=0;

if(!baseFile.exists()){

baseFile.mkdirs();

}

//保存

try {

file.transferTo(targetFile);

size = file.getSize();

} catch (Exception e) {

e.printStackTrace();

}

System.out.println(path+fileName);

model.addAttribute("fileUrl", path+fileName);

PrintWriter out;

try {

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

out = response.getWriter();

//out.println("文件上传成功. 已保存为: " + path + "." + fileName

//+ "   文件大小: " + size + "字节

out.println("");

} catch (IOException e) {

e.printStackTrace();

}

}