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

效果图：

一、引入资源文件

1.1 引入webuploader.css文件

！-引入CSS - link rel='样式表type='text/css' href='././CSS/plugins/web上传器/web上传器。《CSS》1.2引入webuploader.min.js文件

！-引入JS -脚本类型=' text/JavaScript ' src=' http :/./js/plugins/web uploader/web uploader。量滴js /脚本二、超文本标记语言代码

div class=' row ' div class=' btns col-sm-2 ' div id=' picker '选择文件/div按钮id=' ctlBtn ' class=' BTN默认-BTN '开始上传/button /div！-用来存放文件信息-div id=' the list ' class=' uploader-list col-sm-10 '/div/div三、JavaScript代码

脚本类型=' text/JavaScript ' $(function(){ var uploader=web uploader。创建({//选完文件后，是否自动上传auto: false，//文件接收服务端服务器： '/common/web upload _ pic '，//选择文件的按钮。可选。 //内部根据当前运行是创建，可能是投入元素，也可能是闪光pick: '#picker '，//不压缩图像，默认如果是jpeg，文件上传前会压缩一把再上传！resize: false，//只允许选择图片文件accept: { title: 'Images '，extensions: 'gif，jpg，jpeg，bmp，png '，mimetype : ' image/*，/* fileSizeLimit :10，//验证文件总大小是否超出限制，超出则不允许加入队列fileSingleSizeLimit :10，//验证单个文件大小是否超出限制，超出则不允许加入队列*/重复：路径/去重，根据文件名字、文件大小和最后修改时间来生成哈希键。});//当文件被加入队列之前触发，此事件的处理者返回值为假的，则此文件不会被添加进入队列uploader.on('beforeFileQueued '，函数（文件){ //限制图片数量img_length=$('#thelist img ').长度；if (img_length=6) { layer.msg('图片最多上传6张');返回false } })；//当有文件添加进来的时候uploader.on('fileQueued '，函数(文件){ var $ Li=$(' div id=')文件。id ' ' class=' file-item缩略图col-sm-3 ' style=' width :150 px；边距-左侧：10 px“img”div class=“info”文件。name/' div ' ' span style=' margin-left : 78%；光标：指针指针；onclick="删除文件(这一点)”删除/span' '/div ')，$ img=$ Li。find(' img ')；//$列表为容器框架实例$('#thelist ').追加($李)；//创建缩略图//如果为非图片文件，可以不用调用此方法//拇指指甲宽度x拇指指甲高度为100 x 100 uploader.makeThumb(文件，函数（错误，src ) { if(错误){ $img.replaceWith('span不能预览/span’)；返回；} $img.attr('src '，src)；}, 150, 150 );});//文件上传成功，给项目添加成功同学们，用样式标记上传成功uploader.on('uploadSuccess '，函数（文件){ $(“#”file . id).addClass(')上传-状态-完成');var $li=$('#' file.id)，$ done=$ Li。find(' div。上传-状态-完成’)；//避免重复创建if(！$完成。长度){ $ done=$(' div class=' '/div ').appendo(李)；} $done.html('font color='blue ')上传成功/font ')；});//文件上传失败，显示上传出错uploader.on('uploadError '，函数(文件){ var $ Li=$(' # '文件。id)，$ error=$ Li。find(' div。错误')；//避免重复创建if(！$错误。长度){ $ error=$(' div class=' error '/div ').appendo(李)；} $error.html('font color='red ')上传失败/font ')；});$('#ctlBtn ').点击(function(){ uploader。上传()；}) })函数删除文件(obj) { $(obj).父项()。移除();}/脚本四、java代码

/* * * * @ title : web上传pic * @ description : web上传插件上传图片* @author:大都督* @ param文件* @返回* @引发IOException * @返回： MessageInfo */@请求映射('/web upload _ pic ')@ response body public MessageInfo webuploadPic(httpersvletrequest)引发IOException {多部分httpersvletrequest }多部分请求=(多部分httpersvletrequest)请求；映射字符串，多性能文件文件映射=多性能请求。getfilemap()；列表字符串file _ URL _ list=list。new ArrayList()；for(MultiperFile文件： filemap。values()){ file _ URL _ list。添加('/pictures/' fileutil。上传文件(文件，图片_网址))；}返回结果生成器。gensuccessresult(file _ URL _ list)；}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。