个人中心
gpt4 book ai didi

webuploader+springmvc实现图片上传功能

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章webuploader+springmvc实现图片上传功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

jsp文件 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<%@ page language= "java" contenttype= "text/html; charset=utf-8"
  pageencoding= "utf-8" %>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd" >
<html>
<head>
<meta http-equiv= "content-type" content= "text/html; charset=utf-8" >
<title>insert title here</title>
<link rel= "stylesheet" type= "text/css" href= "${pagecontext.request.contextpath}/manage/widget/webuploader/0.1.5/webuploader.css" rel= "external nofollow" >
<script src= "${pagecontext.request.contextpath}/manage/assets/js/jquery.min.js" ></script>
<script src= "${pagecontext.request.contextpath}/manage/widget/webuploader/0.1.5/webuploader.js" ></script>
</head>
<body>
  <h3>图片上传</h3>
  <!--dom结构部分-->
  <div id= "uploader-demo" >
  <!-- 用来存放item -->
  <div id= "filelist" class = "uploader-list" ></div>
  <div id= "upinfo" ></div>
  <div id= "filepicker" >选择文件</div>
  </div>
  <input type= "button" id= "btn" value= "开始上传" >
 
<script>
//图片上传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: false ,
  // swf文件路径
  swf: '${pagecontext.request.contextpath }/manage/widget/webuploader/0.1.5/uploader.swf' ,
  // 文件接收服务端。
  server: '${pagecontext.request.contextpath }/uploader.action' ,
  threads: '5' , //同时运行5个线程传输
  filenumlimit: '10' , //文件总数量只能选择10个
 
  // 选择文件的按钮。可选。
  pick: {id: '#filepicker' , //选择文件的按钮
  multiple: true }, //允许可以同时选择多个图片
  // 图片质量，只有type为`image/jpeg`的时候才有效。
  quality: 90 ,
 
  //限制传输文件类型，accept可以不写
  accept: {
  title: 'images' , //描述
  extensions: 'gif,jpg,jpeg,bmp,png,zip' , //类型
  mimetypes: 'image/*' //mime类型
  }
  });
 
 
  // 当有文件添加进来的时候，创建img显示缩略图使用
  uploader.on( 'filequeued' , function( file ) {
  var $li = $(
  '<div id="' + file.id + '" class="file-item thumbnail">' +
   '<img>' +
   '<div class="info">' + file.name + '</div>' +
  '</div>'
  ),
  $img = $li.find( 'img' );
 
  // $list为容器jquery实例
  $list.append( $li );
 
  // 创建缩略图
  // 如果为非图片文件，可以不用调用此方法。
  // thumbnailwidth x thumbnailheight 为 100 x 100
  uploader.makethumb( file, function( error, src ) {
  if ( error ) {
  $img.replacewith( '<span>不能预览</span>' );
  return ;
  }
 
  $img.attr( 'src' , src );
  }, thumbnailwidth, thumbnailheight );
  });
 
  // 文件上传过程中创建进度条实时显示。 uploadprogress事件：上传过程中触发，携带上传进度。 file文件对象 percentage传输进度 nuber类型
  uploader.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, 用样式标记上传成功。 file：文件对象， response：服务器返回数据
  uploader.on( 'uploadsuccess' , function( file,response) {
  $( '#' +file.id ).addclass( 'upload-state-done' );
  //console.info(response);
  $( "#upinfo" ).html( "<font color='red'>" +response._raw+ "</font>" );
  });
 
  // 文件上传失败  file:文件对象 ， code：出错代码
  uploader.on( 'uploaderror' , function(file,code) {
  var $li = $( '#' +file.id ),
  $error = $li.find( 'div.error' );
 
  // 避免重复创建
  if ( !$error.length ) {
  $error = $( '<div class="error"></div>' ).appendto( $li );
  }
 
  $error.text( '上传失败!' );
  });
 
  // 不管成功或者失败，文件上传完成时触发。 file： 文件对象
  uploader.on( 'uploadcomplete' , function( file ) {
  $( '#' +file.id ).find( '.progress' ).remove();
  });
 
  //绑定提交事件
  $( "#btn" ).click(function() {
  console.log( "上传..." );
  uploader.upload(); //执行手动提交
  console.log( "上传成功" );
  alert( "上传成功!" );
  });
 
});
</script>
</body>
</html>

springmvc 的 servlet加入以下代码(允许上传)

?
1
<bean id= "multipartresolver" class = "org.springframework.web.multipart.commons.commonsmultipartresolver" />

引入的包 。

commons-io-1.3.2.jar commons-fileupload-1.2.1.jar 。

java代码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
package com.shopping.controller;
 
import java.io.file;
import java.io.ioexception;
import java.util.map;
 
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
 
import org.springframework.stereotype.controller;
import org.springframework.web.bind.annotation.requestmapping;
import org.springframework.web.multipart.multipartfile;
import org.springframework.web.multipart.multiparthttpservletrequest;
 
/**
  * @author mazn
  * @date 创建时间：2017年5月2日 下午10:02:36
  * @parameter
  * @return
  */
@controller
public class uploadimgcontroller {
  int counter = 0 ;
 
 
  @requestmapping ( "/uploader" )
  public void upload(httpservletrequest request,httpservletresponse response){
 
  //string filename;
  // file tagetfile;
  system.out.println( "收到图片!" );
  multiparthttpservletrequest murequest = (multiparthttpservletrequest)request;
  map<string, multipartfile> files = murequest.getfilemap(); //得到文件map对象
  //string upaloadurl = request.getsession().getservletcontext().getrealpath("/")+"upload/";//得到当前工程路径拼接上文件名
  string t=thread.currentthread().getcontextclassloader().getresource( "" ).getpath();
  int num=t.indexof( ".metadata" );
  string small = "small" ;
  string upaloadurl=t.substring( 1 ,num).replace( '/' , '\' )+ "image\" +small+ "\" ;
  //+"项目名\webcontent\文件";
  file dir = new file(upaloadurl);
  system.out.println(upaloadurl);
  string img_url = upaloadurl; //图片路径
  if (!dir.exists()) //目录不存在则创建
  dir.mkdirs();
  for (multipartfile file :files.values()){
  counter++;
  string filename=file.getoriginalfilename();
  file tagetfile = new file(upaloadurl+filename); //创建文件对象
  img_url += filename;
  if (!tagetfile.exists()){ //文件名不存在 则新建文件，并将文件复制到新建文件中
   try {
   tagetfile.createnewfile();
   } catch (ioexception e) {
   e.printstacktrace();
   }
   try {
   file.transferto(tagetfile);
   } catch (illegalstateexception e) {
   e.printstacktrace();
   } catch (ioexception e) {
   e.printstacktrace();
   }
 
  }
  }
  system.out.println(img_url);
  system.out.println( "接收完毕" +counter);
  }
}

参考：webuploader客户端批量上传图片 后台使用springmvc 。

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

原文链接：https://blog.csdn.net/qq_33303319/article/details/71114012 。

最后此篇关于webuploader+springmvc实现图片上传功能的文章就讲到这里了,如果你想了解更多关于webuploader+springmvc实现图片上传功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

28 4 0
文章推荐： C语言中指针 int *p=0;和int *p;*p=0;和”&“的关系和区别详解
文章推荐： Flask搭建一个API服务器的步骤
文章推荐： C++ min/max_element 函数用法详解
文章推荐： Python趣味挑战之给幼儿园弟弟生成1000道算术题
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com