Form表单上传文件（type="file"）的使用

一，单个文件的上传

1.html/jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
  String path=request.getContextPath();
  request.setAttribute("path", path);
%>
</head>
<body>
<form action="${path}/FileSer" method="post" enctype="multipart/form-data">
  <table>
    <tr>
      <td>上传文件</td>
      <td>
        <input type="file" name="fileN" />
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" />
        <input type="reset" />
      </td>
    </tr>
  </table>
  </form>
</body>
</html>

2.过滤器解决中文乱码问题

package com.ser;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Filter01 implements Filter
{
  @Override
  public void destroy()
  {
  }
  @Override
  public void doFilter(ServletRequest arg0, ServletResponse arg1,
      FilterChain arg2) throws IOException, ServletException
  {
    HttpServletRequest request= (HttpServletRequest)arg0;
    HttpServletResponse response=(HttpServletResponse)arg1;
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    response.setContentType("text/html charset=utf-8");
    arg2.doFilter(request, response);
  }
  @Override
  public void init(FilterConfig arg0) throws ServletException
  {
  }
}

3.处理html/jsp

package com.ser;
import java.io.File;
import java.io.IOException;
import javax.servlet.ServletConfig;
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;
/**
 * Servlet implementation class FileSer
 */
@WebServlet("/FileSer")
@MultipartConfig(location="e://uploadFile",
    fileSizeThreshold=1024*1024*1000,
    maxFileSize=1024*1024*1000,
    maxRequestSize=1024*1024*1024
    )
public class FileSer extends HttpServlet {
  private static final long serialVersionUID = 1L;
  private static final String location="e://uploadFile";
  /**
   * @see HttpServlet#HttpServlet()
   */
  public FileSer() {
  }
  @Override
  public void init(ServletConfig config) throws ServletException
  {
    File file =new File("e://uploadFile");
    if(!file.exists()&& !file.isDirectory())
    {
      file.mkdir();
    }
  }
  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  }
  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    Part part= request.getPart("fileN");
    String fileType=part.getContentType();
    String fileHeader=part.getHeader("content-disposition");
    //String fileName=part.getName();
    long size=part.getSize();
    System.out.println(part);
    System.out.println(fileType);
    System.out.println(fileHeader);
    //System.out.println(fileName);
    System.out.println(size);
    String filename=fileHeader.substring(fileHeader.indexOf("filename=")+10, fileHeader.lastIndexOf("\""));
    part.write(filename);
    response.getWriter().print(filename+"上传成功");
  }
}

总结

以上所述是小编给大家介绍的Form表单上传域（type="file"）的使用(上传文件)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • springmvc利用jquery.form插件异步上传文件示例

    springmvc利用jquery.form插件异步上传文件示例

    需要的下载文件: jQuery.form.js jquery.js commons-fileupload.jar commons-io.jar 示例图片 pom.xml <!-- 文件上传 --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3</ve

  • jQuery用FormData实现文件上传的方法

    前言 我们引入jQuery来进行异步上传可以获得更好的用户体验. 一方面,在JavaScript中进行异步操作比表单更加灵活: 另一方面,异步上传也避免了上传大文件时的页面长时间卡死. HTML 一个type=file的<input>就可以让用户来浏览并选择文件, 一般会把输入控件放到一个<form>中,下面的一个简单的表单: <form> <input type="file" id="avatar" name="

  • NodeJS使用formidable实现文件上传

    最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实现文件的上传功能.该小demo用到了MySQL数据库,所有的数据都存放到了数据库中.下面简单说一些如何使用. 1.创建app.js主文件 const express = require('express'); const router = require('./router'); const pat

  • nodejs 实现模拟form表单上传文件

    nodejs 实现模拟form表单上传文件

    以前项目里有这个方法,最近在客户那里出问题了,同事说,这个方法从来就没管用过,SO,用了一天时间把这个方法给搞出来了(觉得花费的时间长了点),分享之. 代码及测试用例: var http = require('http'); var path = require('path'); var fs = require('fs'); function postFile(fileKeyValue, req) { var boundaryKey = Math.random().toString(16);

  • Ajax提交Form表单及文件上传的实例代码

    前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Form表单上传有一段Json串和图片文件: Form表单上传图片只需要在<form>标签里加上enctype = 'multipart/form-data',这样是可以上传图片的: 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新: 这样我们可以先到异步的Ajax可以实现局部刷新: 废话不多说了 直接上代码: 首先是html: <form id = "f

  • jQuery Ajax使用FormData对象上传文件的方法

    jQuery Ajax使用FormData对象上传文件的方法

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM

  • Form表单上传文件（type="file"）的使用

    一,单个文件的上传 1.html/jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/

  • Form表单上传文件（type="file"）的使用

    一,单个文件的上传 1.html/jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/

  • thinkphp表单上传文件并将文件路径保存到数据库中

    thinkphp表单上传文件并将文件路径保存到数据库中

    上传单个文件,此文以上传图片为例,上传效果如图所示 创建数据库upload_img,用于保存上传路径 CREATE TABLE `seminar_upload_img` ( `id` int(11) NOT NULL AUTO_INCREMENT, `img_name` varchar(255) DEFAULT NULL COMMENT '图片名称', `img_url` varchar(255) DEFAULT NULL COMMENT '图片路径', `create_time` text,

  • Ant Design_Form表单上传文件组件实现详解

    目录 背景 实现 问题1: 问题2: tip1:注意一下新增和修改时校验方法 tip2: 注意一下beforeUpload的返回值 背景 需要实现的需求:在一个表单提交中,需要提交各种组件的提交信息,其中包括上传文件:一般呢,我们会在选择文件的时候将文件先传到服务器,拿到文件的URL,在提交表单的时候传的其实是文件的URL: 刚开始,对文件没有必填的校验,是比较简单的:但是后来要求文件是必传的,需要加上文件的校验,就暴漏了一些小问题: 实现 首先,先对Upload组件加上必传的校验 rules=

  • php使用curl模拟浏览器表单上传文件或者图片的方法

    前言 在浏览器使用html中的input框我们可以实现文件的上传,表单元素选用 <input type="file"> 控件,form 表单需要设置 enctype="multipart/form-data" 属性.比如: <body> <form action="UploadFile.php" method="post" enctype="multipart/form-data&quo

  • JavaScript设置表单上传时文件个数的方法

    JavaScript设置表单上传时文件个数的方法

    本文实例讲述了JavaScript设置表单上传时文件个数的方法.分享给大家供大家参考.具体如下: 这是一个比较实用的功能,用JavaScript来设置表单上传文件时,根据需要生成上传表单,要几个生成几个,在网易邮箱.新浪邮箱的添加附件功能里都有这种功能,不过这一款没有删除表单的功能,如果输入的多了,只好重新来过啦 运行效果如下图所示: 具体代码如下: <title>JavaScript设置表单上传时的文件个数</title> <input type="button&

  • Yii2使用表单上传文件的实例代码

    yii2用表单上传文件经常用到的,该怎样上传呢? 1.单个文件上传 首先建立一个模型models/UploadForm.php,内容如下 namespace app\models; use yii\base\Model; use yii\web\UploadedFile; /** * UploadForm is the model behind the upload form. */ class UploadForm extends Model { /** * @var UploadedFile

  • JavaScript实现form表单的多文件上传

    form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式上传文件 <!--文件上传--> <form id="uploadForm" enctype="multipart/form-data"> <div class="row" style="margin-top:

  • jQuery.Form实现Ajax上传文件同时设置headers的方法

    废话不多说了,关于jquery form实现ajax上传文件的方法,大家参考一下实例代码吧: <span style="font-family: Arial, Helvetica, sans-serif;">function ajaxSubmitForm() {</span> var option = { url : cache.batchImport, type : 'POST', dataType : 'json', headers : {"tok

随机推荐