图片上传和修改样式
程序员文章站
2022-06-24 16:24:06
我的图片上传使用form表单,html: css js 后台把数据传给数据库,成功后跳转页面,在html页面中用这个 ......
我的图片上传使用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}"/>
推荐阅读