java图片上传的css样式_webuploader实现上传图片到服务器功能

本文为大家分享了webuploader实现上传图片到服务器的具体代码，供大家参考，具体内容如下

效果图：

一、引入资源文件

1.1 引入webuploader.css文件

1.2 引入webuploader.min.js文件

二、html代码

选择文件

开始上传

三、javascript代码

$(function(){

var uploader = webuploader.create({

// 选完文件后，是否自动上传。

auto: false,

// 文件接收服务端。

server: '/common/webupload_pic',

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

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

pick: '#picker',

// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

resize: false,

// 只允许选择图片文件。

accept: {

title: 'images',

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

mimetypes: 'image/*'

},

/* filesizelimit :10, //验证文件总大小是否超出限制, 超出则不允许加入队列

filesinglesizelimit :10, //验证单个文件大小是否超出限制, 超出则不允许加入队列。 */

duplicate :true //去重， 根据文件名字、文件大小和最后修改时间来生成hash key.

});

// 当文件被加入队列之前触发，此事件的handler返回值为false，则此文件不会被添加进入队列。

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

// 限制图片数量

img_length = $("#thelist img").length;

if (img_length >= 6) {

layer.msg("图片最多上传6张");

return false;

}

});

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

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

var $li = $(

'

' +

'' +

'

' + file.name + '

' +

'删除' +

'

'

),

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

// $list为容器jquery实例

$("#thelist").append( $li );

// 创建缩略图

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

// thumbnailwidth x thumbnailheight 为 100 x 100

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

if ( error ) {

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

return;

}

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

}, 150, 150 );

});

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

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

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

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

$done = $li.find('div.upload-state-done');

// 避免重复创建

if ( !$done.length ) {

$done = $('

}

$done.html('上传成功');

});

// 文件上传失败，显示上传出错。

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

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

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

// 避免重复创建

if ( !$error.length ) {

$error = $('

}

$error.html('上传失败');

});

$("#ctlbtn").click(function(){

uploader.upload();

})

})

function deletefile(obj) {

$(obj).parent().remove();

}

四、java代码

/**

*

* @title: webuploadpic

* @description: webupload插件上传图片

* @author: 大都督

* @param files

* @return

* @throws ioexception

* @return: messageinfo

*/

@requestmapping("/webupload_pic")

@responsebody

public messageinfo webuploadpic(httpservletrequest request) throws ioexception {

multiparthttpservletrequest multipartrequest = (multiparthttpservletrequest) request;

map filemap = multipartrequest.getfilemap();

list file_url_list = lists.newarraylist();

for (multipartfile file:filemap.values()) {

file_url_list.add("/pictures/"+fileutil.uploadfile(file, pictures_url));

}

return resultgenerator.gensuccessresult(file_url_list);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

希望与广大网友互动？？

点此进行留言吧！