网站内容管理系统上传图片( 2018年大都督webuploader实现上传图片到服务器的具体代码)

　　网站内容管理系统上传图片(

2018年大都督webuploader实现上传图片到服务器的具体代码)

　　Webuploader实现了向服务器上传图片的功能

　　更新时间：2018年8月16日15:57:52作者：我是大都会州长

　　本文文章主要详细介绍webuploader如何将图片上传到服务器。具有一定的参考价值。感兴趣的合作伙伴可以参考它

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

　　渲染：

　　

　　一、import资源文件

　　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 = $(

'' +

'<img>' +

'' + 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 = $('').appendTo( $li );

}

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

});

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

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

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

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

// 避免重复创建

if ( !$error.length ) {

$error = $('').appendTo( $li );

}

$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);

}

　　以上是本文的全部内容。我希望这将有助于你的学习，我希望你能支持脚本的房子