这篇文章介绍的内容是关于浏览器显示本地图片的预览图，调用后端接口将图片上传至服务器，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
一、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.数据库数据
相关推荐：
html5 本地裁剪图片并上传至服务器
压缩本地图片并上传至服务器
java上传文件图片到服务器保存
把微信编辑器文章样式中的图片上传到微信服务器
以上就是js如何获取本地图片显示到浏览器并上传至服务器 的详细内容。