1.概述

在最初的http协议中，没有上传文件方面的功能。rfc1867（http://www.ietf.org/rfc/rfc1867.txt ）为http协议添加了这个功能。浏览器按照此规范将用户指定的文件发送到服务器。服务器再按照此规范，解析出文件。大部分的http server都支持此协议，比如tomcat(本文用的是Spring MVC，即HttpServelet来接收请求)。

网上很多博客，以及插件的做法，是建一个iframe用户无刷新请求，再建一个form用于提交。但其实可以直接用JavaScript和ajax提交。

2.前端实现

首先，需要type为file的input标签，该标签用于选择文件，手机和PC都适用。
然后，当你点击file input标签的时候，会弹出选择文件控件（该控件是操作系统内部提供的）
最后，就是提交form（form的enctype必须为“multipart/form-data”），提交form的目的是把file input里面的文件提交给服务器。用一个submit按钮提交form。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

</head>

<body>

<form name="myform" enctype="multipart/form-data" action="http://localhost/uploadImage" method=post>

<input name="userfile1" type="file" onchange="upload(this);">

</form>

</body>

<script>

function upload() {

var myform = document.forms['myform'];

myform.method = 'POST';

myform.submit();

}

</script>

</html>

3.后端实现

 @RequestMapping(value = "/uploadImage")

    @ResponseBody

    public String uploadImage(HttpServletRequest request) throws IOException {

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;

        Iterator<String> iterator = multipartRequest.getFileNames();

        String fileName = "";

        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");

        String dir = "upload/" + sdf.format(new Date()) + "/";

        String realPath = request.getSession().getServletContext().getRealPath("/");

        while(iterator.hasNext()){

            MultipartFile multipartFile = multipartRequest.getFile(iterator.next());

            if(multipartFile != null){

                String fn = multipartFile.getOriginalFilename();

                String suffix = fn.substring(fn.lastIndexOf("."));

                fileName = dir  + Utils.getRandomStringByLength(6) + suffix;

                String path = realPath + fileName;

                path = path.replace("\\", "/");

                File f = new File(path);

                if(!f.mkdirs()){

                    f.mkdir();

                }

                multipartFile.transferTo(f);

            }

        }

        return fileName;

    }

HTTP上传 文件上传 图片上传 HTTP上传原理 文件上传原理 图片上传原理的更多相关文章

  1. Web---文件上传-用apache的工具处理、打散目录、简单文件上传进度

    我们需要先准备好2个apache的类: 上一个博客文章只讲了最简单的入门,现在来开始慢慢加深. 先过渡一下:只上传一个file项 index.jsp: <h2>用apache的工具处理文件 ...

  2. Java Web文件上传原理分析(不借助开源fileupload上传jar包)

    Java Web文件上传原理分析(不借助开源fileupload上传jar包) 博客分类: Java Web   最近在面试IBM时,面试官突然问到:如果让你自己实现一个文件上传,你的代码要如何写,不 ...

  3. 图片的URL上传至阿里云OSS操作（微信小程序二维码返回的二进制上传到OSS）

    当我们从网络中获取一个URL的图片我们要存储到本地或者是私有的云时,我们可以这样操作  把url中的图片文件下载到本地(或者上传到私有云中)  public String uploadUrlToOss ...

  4. 上传文件到服务器指定位置 & 从服务器指定位置下载文件

    需要的jar包: 去maven仓库自己搜索com.jcraft下载jar包 <dependency> <groupId>com.jcraft</groupId> & ...

  5. rsync 实现文件同步 (重要数据通过rsyncr把数据同步到不同的两台服务器上,这样可以防止服务器的硬盘故障导致数据丢失) 客户端同步时如果要排某个目录

    rsync是unix系统下的数据镜像 备份工具,一般linux系统都 自带: # rpm -qa|grep rsync rsync-3.0.9-17.el7.x86_64 服务器端:10.100.0. ...

  6. .pages怎么在windows上打开？Windows下打开在Mac中编辑的.pages文件方法

    .pages怎么在windows上打开?Windows下打开在Mac中编辑的.pages文件方法 1.最简单的方法是修改后缀名为.zip然后解压,解压后就可以看到一张图片,这个就是文档内容了. 2.更 ...

  7. 在英文Windows操作系统上使用SQL Server Management Studio（SSMS）导入Excel 97-2003文件时报错：Failure creating file

    今天在公司服务器上使用SQL Server Management Studio(SSMS)导入Excel 97-2003文件(.xls)时报错: Failure creating file. (Mic ...

  8. USB-Blaster CPLD FPGA Intel 驱动安装不上的问题，文件的哈希值不在指定的目录文件中，的解决办法，其实很简单

    intel的官网的驱动安装文档: https://www.intel.com/content/www/us/en/programmable/support/support-resources/down ...

  9. 用tsc编译ts文件的时候报错，tsc : 无法加载文件，因为在此系统上禁止运行脚本；

    用tsc编译ts文件的时候报错,tsc : 无法加载文件,因为在此系统上禁止运行脚本:SecurityError 在vscode的控制台或者Windows PowerShell中用tsc命令编译ts文 ...

  10. Linux下安装pip（遇到了python2.6升级为python2.7道路上的坑，原因已经找到，只差临门一脚了，以后补上）

    1.先说一下什么是pippip 是“A tool for installing and managing Python packages.”,也就是说pip是python的软件安装工具2.下面介绍怎么 ...

随机推荐

  1. Oracle 一些简单操作

    登录oracle 以root用户切换到oracle数据库用户:su - oracle 输入sqlplus /nolog 不连接任何数据库 conn /as sysdba 用sysdba登录 start ...

  2. Maven进阶宝典

    前言: 团队在开发过程中用的是maven项目,由于对maven的一些打包流程以及相关参数配置不是太了解,因此应大家的需求做一下maven的讲解,为了不误导大家,看了很多相关资料,自己也实验了一下,就把 ...

  3. Html +++++css总结

    一. Html部分 Html定义 Hyper Text Markup Language  超文本标记语言 html 1.0  ->  html  2.0   -> ... -> ht ...

  4. Dell M102ZD-128 —— 拿XP拯救你

    查过新浪博客上的记录: http://blog.sina.com.cn/s/articlelist_1259160330_7_1.html 2011年6月买了这台 Dell Inspiron M102 ...

  5. 摆脱printf的噩梦

    众所周知,printf是一个方便.直观.易写.变长参数的打印函数,但它有一个致命的缺陷,如下的语句将导致程序出现严重的运行时错误: printf("%s", 1); 然后程序中断, ...

  6. 在Ubuntu Linux下制作Windows 启动安装 USB盘

    最近想 ,在Ubuntu上刻录个windows的安装U盘,在网上看了些资料,不过好多都说的很模糊,于是乎,我走了不少弯路.这里记录下来,希望了帮到大家. 首先你的有个USB吧,这里我们假定USB在ub ...

  7. linux使用LVM合并硬盘

    目的将两块空硬盘合并为"一块",挂载到指定目录下,达到在一个目录使用2块硬盘所有空间的效果.条件硬盘1 /dev/sdb 硬盘2 /dev/sdc方法创建pvpvcreate /d ...

  8. iOS开发之CALayer

    1.         概述 在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView,其实UIView之所以能显示在屏幕 ...

  9. HTML5 之文件操作(file)

    前言 在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建. 该元素包含一个文本输入字段,用来输入文 ...

  10. docker使用Let’s Encrypt协议构建免费https协议

    简介:我们可以把自己的image上传到dockerhub或者阿里云的docker镜像仓库,但在实际使用中我们很多时候都用的是自己的registry,便于内部的共享等等优点,docker镜像默认支持ht ...