经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
图片上传和修改样式
来源:cnblogs  作者:魏什么胖丫  时间:2018/9/25 20:10:30  对本文有异议

我的图片上传使用form表单,html:

  1. 选择你的新头像--〉   
  2.      确定

css

  1. .imgcss{width:100px;height:100px;border:1px solid #f0f0f0;
  2. }.imgcss:hover i{color:#CCCCFF;background-color:#f0f0f0;
  3. }.imgcss i{font-size:100px;width-size:2px;color:#f0f0f0;
  4. }/*图片*/#img_a{float:left;margin-top:40px;font-weight:bold;color:#C0C0C0;
  5. }#Up{float:right; height:20px;width:60px;font-size:15px;margin-top:20px;
  6. }

js


  1. //这个方法是隐藏的文件上传控件点击方
  1. function c () {      var r= new FileReader();      var f=$("#file")[0].files[0];
  2.       r.readAsDataURL(f);
  3.       r.onload=function (e) {
  4.         $("#i").css('display','none'); 
  5.         $("#imgcss").css("background-image","url("+this.result+")");
  6.         $("#imgcss").removeClass("imgcss");
  7.         $("#imgcss").css({"background-size":"cover","width":"100px","height":"100px"});
  8.       };
  9.     }
  10.  
  11. $(document).ready(function() {
  12.     $("#imgcss").click(function(){
  13.         $("#file").click();
  14.     });});
  1. FileItemFactory factory = new DiskFileItemFactory();     // 创建文件上传处理器ServletFileUpload upload = new ServletFileUpload(factory);// 开始解析请求信息List items = null;try {
  2.             items = upload.parseRequest(request);
  3.         }catch (FileUploadException e) {
  4.             e.printStackTrace();
  5.         }// 对所有请求信息进行判断Iterator iter = items.iterator();while (iter.hasNext()) {
  6.             FileItem item = (FileItem) iter.next();// 信息为普通的格式if (item.isFormField()) {
  7.                 String fieldName = item.getFieldName();
  8.                 String value = item.getString();
  9.                 request.setAttribute(fieldName, value);
  10.             }// 信息为文件格式else {
  11.                 String fileName = item.getName();
  12.                 String suffix = fileName.substring(fileName.lastIndexOf('.'));//图片名System.out.println("图片名字"+fileName);//后缀名                System.out.println(suffix);int index = fileName.lastIndexOf("\\");
  13.                 fileName = fileName.substring(index + 1);
  14.                 request.setAttribute("realFileName", fileName);//图片urlString basePath = getServletConfig().getServletContext().getRealPath("/")+"img";
  15.                 System.out.println(basePath);//新文件名String newFileName = new Date().getTime() + suffix;
  16.                 System.out.println(newFileName);
  17.                 File file = new File(basePath, newFileName);try {
  18.                     item.write(file);int userId = (Integer) request.getSession().getAttribute("id");
  19.                     System.out.println("userId:" + userId);//存图片信息                    imagsTT.ImagsUp(userId, newFileName,basePath);
  20.                     session.setAttribute("imgurl", "img/" + newFileName);
  21.                     System.out.print("用图片返回查询的数据"+"img/" + newFileName);
  22.                 }catch (Exception e) {
  23.                     e.printStackTrace();
  24.                 }
  25.             }
  26.             request.setAttribute("msg","文件上传成功!");
  27.             getServletContext().getRequestDispatcher("/My.jsp").forward(request, response);return;
  28.         }

后台把数据传给数据库,成功后跳转页面,在html页面中用这个<img src="${sessionScope.imgurl}"/>

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号