文件上传

文件(图片)的上传方法

首先创建一个servlet用来获取从前端(form表单或者其它方法)传过来的数据,我这里用到人员信息的提交,使用的是form表单。 前端代码form

  <form method="post" class="form-x"  encType="multipart/form-data" action="people.do">    
      <div class="form-group">
        <div class="label">
          <label>姓名:</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="name"  data-validate="required:请输入姓名" />
          <div class="tips"></div>
        </div>
      </div>
       <div class="form-group">
        <div class="label">
          <label>性别:</label>
        </div>
        <div class="field">
          <input type="text" class="input w50"  name="sex" data-validate="required:请输入性别" />
          <div class="tips"></div>
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label>年龄:</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="age" data-validate="required:请输入年龄" />
          <div class="tips"></div>
        </div>
      </div>
        <div class="form-group">
        <div class="label">
          <label>部门:</label>
        </div>
        <div class="field">
          <input type="text" class="input w50"  name="depart" data-validate="required:请输入部门" />
          <div class="tips"></div>
        </div>
      </div>
         <div class="form-group">
        <div class="label">
          <label>手机号码:</label>
        </div>
        <div class="field">
          <input type="text" class="input w50"  name="phone" data-validate="required:请输入手机号码" />
          <div class="tips"></div>
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label>email:</label>
        </div>
        <div class="field">
          <input type="text" class="input w50"  name="email" data-validate="required:请输入email" />
          <div class="tips"></div>
        </div>
      </div>      
      <div class="form-group">
        <div class="label">
          <label>图片:</label>
        </div>
        <div class="field">
          <input type="file" id="url1" name="img" class="input tips button bg-blue margin-left" style="width:25%; float:left;" data-toggle="hover" data-place="right" data-image="" />
          <div class="tipss">图片尺寸:1920*500</div>
        </div>
      </div>
      
      <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
        </div>
      </div>
    </form>

servlet代码

  import java.io.IOException;   
    import javax.servlet.ServletException;
    import javax.servlet.annotation.MultipartConfig;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.Part;
    import com.tf.management.dao.PeopleImp;
    import com.tf.management.entity.Person;
    import com.tf.management.util.UploadImg;
 
    @WebServlet("/people.do")
    @MultipartConfig//注解,这里必须用到多部分上传,因为文件太大,一次传递不完
    public class PeopleServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;        
    	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		//从前端获取数据
    		String name = req.getParameter("name");
    		String age = req.getParameter("age");
    		String sex = req.getParameter("sex");
    		String depart = req.getParameter("depart");
    		String phone = req.getParameter("phone");
    		String email = req.getParameter("email");
    		//获取图片
    		Part part = req.getPart("img");
    		String path = req.getServletContext().getRealPath("img");//获取图片的路径
    		String icon = new UploadImg().uploadImg(part, path);//调用上传图片的方法,返回一个相对路径
    		//处理数据 把数据封装成people对象
           Person person = new Person();
       	   person.setName(name);
	       person.setAge(Integer.valueOf(age));
	       person.setSex(sex);
	       person.setDepart(depart);
	       person.setEmail(email);
	       person.setPhone(phone);
	       person.setIcon(icon);
	      //插入到数据库中
	      new PeopleImp().update(person);
	     //跳转到adv.html页面
	     req.getRequestDispatcher("adv1.html").forward(req, resp);
    	}
 }

上传图片方法

import java.io.File;
import java.io.IOException;
import javax.servlet.http.Part;

public class UploadImg {
	//上传文件
	public String uploadImg(Part part,String path) {
	//2.3通过文件的content-type,判断文件的类型,不是图片类型不让上传
	String type=part.getContentType();
	if (!(type.contains("png")||type.contains("jpeg")||type.contains("gif"))) {
	//返回前端文件必须是指定格式	
	return null;
	}
	//2.4判断文件大小,可以限制图片的大小
	if (part.getSize()>256*768) {
	return null;//如果太小,上传不上去
	}
	//2.5将文件进行拼接写入到指定文件
	//处理字符串,获取上传的文件名
	String content=part.getHeader("content-disposition");//获取文件绝对路径
	String filename=content.substring(content.lastIndexOf("=\"")+2,content.lastIndexOf("\""));//截取文件名称	
	String newFile="img/"+filename;	
	File file=new File(path);
	if (!file.exists()) {//不存在当前文件,新建一个
	file.mkdir();
	}
	filename=path+File.separatorChar+filename;//File.separetorChar是反斜杠,这里在windows和苹果系统都适用
	//2.6将文件写到指定位置
	try {
	part.write(filename);
	} catch (IOException e) {
	// TODO Auto-generated catch block
	e.printStackTrace();
	}
	return newFile;//返回文件路径
	}
}

总结

文件上传的时候一定要记住使用注解,@MultipartConfig多部分上传一定不能少。文件存取到数据库中是相对路径,数据库会根据相对路径在把图片显示在前端。主要注意的是相对路径的拼接。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用三种方式实现轮播图

    顾名思义,轮播图就是实现图片的轮换播放效果。先显示一张图片,一定的时间,让这张图片消失,下一张图片显示。让它们实现跟淘宝首页一样的广告轮播效果。

    微醺
  • 滚动的屏保

    图片的移动,也就是图片坐标的变换,我刚开始做的时候是考虑到四个面,判断每个面是否碰到屏幕壁。这样做的坏处是,需要判断多次,也可能是按照固定的路线在走,一成不变。...

    微醺
  • 小霸王打字机

    依稀记得童年时期,站在电视机傍边,和自己的小伙伴玩小霸王学习机的情景。时间如白驹过隙,现在小伙伴的孩子都会打酱油了,而自己为了生活和梦想依旧在奋斗。怀念青春,就...

    微醺
  • 全栈“食”代:Django + Nuxt 实现美食分享网站(下)

    在上篇[1]中,我们分别用 Django 和 Nuxt 实现了后端和前端的雏形。在这一部分,我们将实现前后端之间的通信,使得前端可以从后端获取数据,并且将进一步...

    一只图雀
  • 对bootstrap框架的一些测试(1)

    bootstrap的栅格系统,默认将整个屏幕放在一个“container”容器中,然后以row为子元素,将‘col‘作为直接子元素,把整个屏幕分成12份,然后对...

    HUBU生信
  • 列表

    达达前端
  • jQuery学习笔记之概念(1)

    jQuery学习笔记之概念(1) ——————————————————————学习目录———————————————————— 1.概念 2.特点 ...

    王小雷
  • 【原创】bootstrap框架的学习 第八课 -[bootstrap表单]

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 内联表单</title> <link hre...

    用户3055976
  • Django+Bootstrap+Mysql 搭建个人博客(四)

    zhang_derek
  • BBS论坛(十九)

    zhang_derek

扫码关注云+社区

领取腾讯云代金券