我的图片上传使用form表单，html：
<form action="imagsup" enctype="multipart/form-data" method="post" >
<img src="img/img_basic.jpg"id="img" style="width:120px;height:110px;float:left;"/> <a id="img_a"> 选择你的新头像--〉</a> <input id="file" name="img_file" onchange="c()" type="file" style="display:none;"><br> <div id="imgcss"class="imgcss"style="float:left;margin-top:-20px;"><i class="icon-plus" id="i"></i></div> <button id="up" type="submit" value="确定" class="button"style="">确定</button>〈/form>
css
我要评论.imgcss{
width:100px;height:100px;border:1px solid #f0f0f0;
}
.imgcss:hover i{
color:#ccccff;
background-color:#f0f0f0;
}
.imgcss i{
font-size:100px;width-size:2px;color:#f0f0f0;
}
/*图片*/
#img_a{
float:left;margin-top:40px;font-weight:bold;color:#c0c0c0;
}
#up{
float:right; height:20px;width:60px;font-size:15px;margin-top:20px;
}
js
//这个方法是隐藏的文件上传控件点击方
function c () {
var r= new filereader();
var f=$("#file")[0].files[0];
r.readasdataurl(f);
r.onload=function (e) {
$("#i").css('display','none');
$("#imgcss").css("background-image","url("+this.result+")");
$("#imgcss").removeclass("imgcss");
$("#imgcss").css({"background-size":"cover","width":"100px","height":"100px"});
};
}
$(document).ready(function() {
$("#imgcss").click(function(){
$("#file").click();
});});
fileitemfactory factory = new diskfileitemfactory();
// 创建文件上传处理器
servletfileupload upload = new servletfileupload(factory);
// 开始解析请求信息
list items = null;
try {
items = upload.parserequest(request);
}
catch (fileuploadexception e) {
e.printstacktrace();
}
// 对所有请求信息进行判断
iterator iter = items.iterator();
while (iter.hasnext()) {
fileitem item = (fileitem) iter.next();
// 信息为普通的格式
if (item.isformfield()) {
string fieldname = item.getfieldname();
string value = item.getstring();
request.setattribute(fieldname, value);
}
// 信息为文件格式
else {
string filename = item.getname();
string suffix = filename.substring(filename.lastindexof('.'));
//图片名
system.out.println("图片名字"+filename);
//后缀名
system.out.println(suffix);
int index = filename.lastindexof("\\");
filename = filename.substring(index + 1);
request.setattribute("realfilename", filename);
//图片url
string basepath = getservletconfig().getservletcontext().getrealpath("/")+"img";
system.out.println(basepath);
//新文件名
string newfilename = new date().gettime() + suffix;
system.out.println(newfilename);
file file = new file(basepath, newfilename);
try {
item.write(file);
int userid = (integer) request.getsession().getattribute("id");
system.out.println("userid:" + userid);
//存图片信息
imagstt.imagsup(userid, newfilename,basepath);
session.setattribute("imgurl", "img/" + newfilename);
system.out.print("用图片返回查询的数据"+"img/" + newfilename);
}
catch (exception e) {
e.printstacktrace();
}
}
request.setattribute("msg","文件上传成功!");
getservletcontext().getrequestdispatcher("/my.jsp").forward(request, response);
return;
}
后台把数据传给数据库，成功后跳转页面，在html页面中用这个<img src="${sessionscope.imgurl}"/>
如对本文有疑问， 点击进行留言回复！！
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
网友评论