上传图片到服务器 java 中如何向服务器上传图片
各位老铁们，大家好，今天由我来为大家分享上传图片到服务器，以及java 中如何向服务器上传图片的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
java 中如何向服务器上传图片
我们使用一些已有的组件帮助我们实现这种上传功能。
常用的上传组件：
Apache的 Commons FileUpload
JavaZoom的UploadBean
jspSmartUpload
以下，以FileUpload为例讲解
1、在jsp端
<form id="form1" name="form1" method="post" action="servlet/fileServlet" enctype="multipart/form-data">
要注意enctype="multipart/form-data"
然后只需要放置一个file控件，并执行submit操作即可
<input name="file" type="file" size="20">
<input type="submit" name="submit" value="提交">
2、web端
核心代码如下：
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
request.setCharacterEncoding("UTF-8");
DiskFileItemFactory factory= new DiskFileItemFactory();
ServletFileUpload upload= new ServletFileUpload(factory);
try{
List items= upload.parseRequest(request);
Iterator itr= items.iterator();
while(itr.hasNext()){
FileItem item=(FileItem) itr.next();
if(item.isFormField()){
System.out.println("表单参数名:"+ item.getFieldName()+"，表单参数值:"+ item.getString("UTF-8"));
} else{
if(item.getName()!= null&&!item.getName().equals("")){
System.out.println("上传文件的大小:"+ item.getSize());
System.out.println("上传文件的类型:"+ item.getContentType());
System.out.println("上传文件的名称:"+ item.getName());
File tempFile= new File(item.getName());
File file= new File(sc.getRealPath("/")+ savePath, tempFile.getName());
item.write(file);
request.setAttribute("upload.message","上传文件成功！");
}else{
request.setAttribute("upload.message","没有选择上传文件！");
}
}
}
}catch(FileUploadException e){
e.printStackTrace();
} catch(Exception e){
e.printStackTrace();
request.setAttribute("upload.message","上传文件失败！");
}
request.getRequestDispatcher("/uploadResult.jsp").forward(request, response);
}
js如何获取本地图片显示到浏览器并上传至服务器
这篇文章介绍的内容是关于浏览器显示本地图片的预览图，调用后端接口将图片上传至服务器，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
一、jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<!--引入js-->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<body>
<p id="enteringInfor">
<form id="uploadForm">
<p class="formItem" style="float:left">
<p class="itemBlock">
<p style="display:inline-block;float:left" class="selectContainer">
<span class="txtBox">姓名</span>
<input type="text" class="select" name="realName" id="realName" placeholder="请输入姓名" style="width:200px;">
</p>
</p>
<p class="itemBlock">
<p style="display:inline-block;float:left" class="selectContainer">
<span class="txtBox">性别</span>
<select class="select" name="gender" id="gender">
<option value="1">男</option>
<option value="2">女</option>
</select>
</p>
</p>
</p>
<p class="formItem" style="float:right;margin-top:50px;">
<p class="picture">
<p class="layui-upload">
<p class="layui-upload-list" id="localImag">
<img class="layui-upload-img" id="userPic" style="width:330px;height:410px">
<p id="demoText"></p>
</p>
<p class="btn btn-primary fileinput-button" style="width:332px;position:absolute;bottom:0px">
<span class="uploadTxt">上传图片</span>
<input class="form-control layui-btn" id="entrustPicUpload" type="file" name="entImg" onchange="getPhoto(this)"/>
</p>
</p>
</p>
</p>
</form>
<p class="modelEditorBottom" style="padding-left:24px;text-align:center;height:70px;line-height:70px;border:none;width:100%;overflow:hidden;zoom:1">
<button class="buttons adminButton" onclick="saveUser()">保存</button>
</p>
<input type="hidden" name="userId" id="userId"/>
</p><script>
var imgurl="";
function getPhoto(node){
var imgURL="";
try{
var file= null;
if(node.files&& node.files[0]){
file= node.files[0];
}else if(node.files&& node.files.item(0)){
file= node.files.item(0);
}
//Firefox因安全性问题已无法直接通过input[file].value获取完整的文件路径
try{
imgURL= file.getAsDataURL();
}catch(e){
imgRUL= window.URL.createObjectURL(file);
}
}catch(e){
if(node.files&& node.files[0]){
var reader= new FileReader();
reader.onload= function(e){
imgURL= e.target.result;
};
reader.readAsDataURL(node.files[0]);
}
}
creatImg(imgRUL);//显示图片
return imgURL;
}
function creatImg(imgRUL){
document.getElementById("userPic").src= imgRUL;
$('#userPic').viewer({
url:'src',
});
}
//保存
function saveUser(){
//数据判断
var realName=$("#realName").val(); if(realName==null||realName==''){
layer.msg('用户名不能为空!',{icon: 7,time:1000}); return;
} var imgSrc=$("#userPic").attr("src"); if(imgSrc==""|| imgSrc==null){
layer.msg('请上传图片!',{icon: 7,time:1000}); return;
} var formData= new FormData($("#uploadForm")[0]);
$.ajax({
url:"../addUser",
type:'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data){
var obj= JSON.parse(data);
layer.msg('保存成功!',{icon: 6,time: 2000});
},
error: function(data){
layer.msg('保存失败!',{icon: 5,time: 2000});
}
});
}</script>
</body></html>二、controller接口
/**
*添加用户
*@param session
*@param request
*@param response
*@throws IOException
*/
@RequestMapping(value="/addUser", method= RequestMethod.POST)
public void addUser(MultipartFile entImg,HttpSession session, HttpServletRequest request, HttpServletResponse response)
throws IOException{
String realName= request.getParameter("realName");//姓名
String gender= request.getParameter("gender");//性别
//调用工具类上传图片
String userPic= FileUtils.uploadUser(entImg, request);
TestUser testUser= new TestUser();
testUser.setRealName(realName);
testUser.setGender(Integer.parseInt(gender));
testUser.setUserPic(userPic);//添加人员信息及图片url到数据库
int res= userService.insertUser(testUser); if(res> 0){
writeJSON(response, res);
} else{
writeJSON(response,null);
}
}三、工具类
public class FileUtils{
FILES_PATH("files_path");//此路径存放于jdbc.properties配置文件中，例如：files_path=D:/uploadImgs
private static final String path= PropertiesUtil.get(FILES_PATH)+"/user";/**
*上传图片URL
*@param fileName
*@param request
*@return
*/
public static String getPath(String fileName,HttpServletRequest request){
String ip=IpUtil.getIP(); int port=request.getLocalPort();
StringBuilder sb=new StringBuilder();
sb.append("http://");
sb.append(ip);
sb.append(":");
sb.append(port);
sb.append("/uploadImgs/user/");
sb.append(fileName); return sb.toString();
}/**
*以时间戳对上传文件进行重新命名
*@param file
*@return
*/
public static String renameFile(MultipartFile file){ if(file!=null){
Long date=new Date().getTime();
String fileRealName=file.getOriginalFilename();
String prefix=fileRealName.substring(fileRealName.lastIndexOf(".")+1);
String fileName= date.toString()+"."+prefix;
return fileName;
} return null;
}/**
*图片上传
*@param file
*@param fileName
*/
public static String uploadUser(MultipartFile file, HttpServletRequest request){//重命名
String renameFile= FileUtils.renameFile(file);//图片名
String picPath= FileUtils.getPath(renameFile, request);//上传
File targetFile= new File(borpath, renameFile); if(!targetFile.exists()&&!targetFile.isDirectory()){
targetFile.mkdirs();
} try{
file.transferTo(targetFile);
} catch(Exception e){
e.printStackTrace();
} return picPath;
}
}四、效果
3.图片上传成功后保存至指定文件夹下
4.数据库数据
相关推荐：
实例讲解js如何实现图片粘贴上传到服务器并展示
本文主要为大家带来一篇js实现图片粘贴上传到服务器并展示的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
最近看了一些有关于js实现图片粘贴上传的demo,实现如下:(这里只能检测到截图粘贴和图片右键复制之后粘贴)
demo1:
document.addEventListener('paste', function(event){
console.log(event)
var isChrome= false;
if( event.clipboardData|| event.originalEvent){
//not for ie11某些chrome版本使用的是event.originalEvent
var clipboardData=(event.clipboardData|| event.originalEvent.clipboardData);
if( clipboardData.items){
// for chrome
var items= clipboardData.items,
len= items.length,
blob= null;
isChrome= true;
//items.length比较有意思，初步判断是根据mime类型来的，即有几种mime类型，长度就是几（待验证）
//如果粘贴纯文本，那么len=1，如果粘贴网页图片，len=2, items[0].type='text/plain', items[1].type='image/*'
//如果使用截图工具粘贴图片，len=1, items[0].type='image/png'
//如果粘贴纯文本+HTML，len=2, items[0].type='text/plain', items[1].type='text/html'
// console.log('len:'+ len);
// console.log(items[0]);
// console.log(items[1]);
// console.log('items[0] kind:', items[0].kind);
// console.log('items[0] MIME type:', items[0].type);
// console.log('items[1] kind:', items[1].kind);
// console.log('items[1] MIME type:', items[1].type);
//阻止默认行为即不让剪贴板内容在p中显示出来
event.preventDefault();
//在items里找粘贴的image,据上面分析,需要循环
for(var i= 0; i< len; i++){
if(items[i].type.indexOf("image")!==-1){
//getAsFile()此方法只是living standard firefox ie11并不支持
blob= items[i].getAsFile();
uploadImgFromPaste(blob,'paste', isChrome);
}
}
/*if( blob!== null){
var reader= new FileReader();
reader.onload= function(event){
// event.target.result即为图片的Base64编码字符串
var base64_str= event.target.result;//获得图片base64字符串
//可以在这里写上传逻辑直接将base64编码的字符串上传（可以尝试传入blob对象，看看后台程序能否解析）
uploadImgFromPaste(base64_str,'paste', isChrome);
}
reader.readAsDataURL(blob);//传入blob对象,读取文件
}*/
} else{
//for firefox
setTimeout(function(){
//设置setTimeout的原因是为了保证图片先插入到p里，然后去获取值
var imgList= document.querySelectorAll('#aaa img'),
len= imgList.length,
src_str='',
i;
for( i= 0; i< len; i++){
if( imgList[i].className!=='my_img'){
//如果是截图那么src_str就是base64如果是复制的其他网页图片那么src_str就是此图片在别人服务器的地址
src_str= imgList[i].src;
}
}
uploadImgFromPaste(src_str,'paste', isChrome);
}, 1);
}
} else{
//for ie11
setTimeout(function(){
var imgList= document.querySelectorAll('#aaa img'),
len= imgList.length,
src_str='',
i;
for( i= 0; i< len; i++){
if( imgList[i].className!=='my_img'){
src_str= imgList[i].src;
}
}
uploadImgFromPaste(src_str,'paste', isChrome);
}, 1);
}
})
//调用图片上传接口,将file文件以formData形式上传
function uploadImgFromPaste(file, type, isChrome){
var formData= new FormData();
formData.append('files', file);
formData.append('submission-type', type);
var xhr= new XMLHttpRequest();
xhr.open('POST','/upload_editor_photo3');
xhr.onload= function(){
console.log(xhr.readyState);
if( xhr.readyState=== 4){
if( xhr.status=== 200){
var data= JSON.parse(xhr.responseText),
editor= document.getElementById('aaa');
if( isChrome){
var len=data.data.length;
for( var i= 0; i< len; i++){
var img= document.createElement('img');
img.className='my_img';
img.src= data.data[i];//设置上传完图片之后展示的图片
editor.appendChild(img);
}
} else{
var imgList= document.querySelectorAll('#aaa img'),
len= imgList.length,
i;
for( i= 0; i< len; i++){
if( imgList[i].className!=='my_img'){
imgList[i].className='my_img';
imgList[i].src= data.data[i];
}
}
}
} else{
console.log( xhr.statusText);
}
};
};
xhr.onerror= function(e){
console.log( xhr.statusText);
}
xhr.send(formData);
}demo2:
//处理粘贴事件
$("#aaa").on('paste', function(eventObj){
//处理粘贴事件
var event= eventObj.originalEvent;
var imageRe= new RegExp(/image\/.*/);
var fileList=$.map(event.clipboardData.items, function(o){
if(!imageRe.test(o.type)){ return}
var blob= o.getAsFile();
return blob;
});
if(fileList.length<= 0){ return}
upload(fileList);
//阻止默认行为即不让剪贴板内容在p中显示出来
event.preventDefault();
});
function upload(fileList){
for(var i= 0, l= fileList.length; i< l; i++){
var fd= new FormData();
var f= fileList[i];
fd.append('files', f);
var editor=document.getElementById("aaa");
$.ajax({
url:"/upload_editor_photo3",
type:'POST',
dataType:'json',
data: fd,
processData: false,
contentType: false,
xhrFields:{ withCredentials: true},
headers:{
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Credentials':'true'
},
success: function(res){
var len=res.data.length;
for( var i= 0; i< len; i++){
var img= document.createElement('img');
img.src= res.data[i];//设置上传完图片之后展示的图片
editor.appendChild(img);
}
},
error: function(){
alert("上传图片错误");
}
});
}
}注意:因为只支持右键复制图片,所以并不能一下复制两张图片,所有图片复制并粘贴上传待研究.
html:
<p id="aaa" contentEditable="true" style="height:800px;border:1px solid#ccc"></p>接口返回数据格式:
{
// errno即错误代码，0表示没有错误。
//如果有错误，errno!= 0，可通过下文中的监听函数 fail拿到该错误码进行自定义处理
errno: 0,
// data是一个数组，返回若干图片的线上地址
data: [
'图片1地址',
'图片2地址',
'??'
]
}大家学会了吗？赶紧动手尝试一下吧。
OK，关于上传图片到服务器和java 中如何向服务器上传图片的内容到此结束了，希望对大家有所帮助。