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. WebSocket数据包协议详解

    其实我一直想不明白HTML5包装个应用层办议作为Socket通过基础目的是为了什么,其实直接支持Socket tcp相对来说更加简单灵活.既然标准已经制定而浏览器也支持那对于我们开发者来说只能用的分. ...

  2. Storm（2015.08.12笔记）

    2015.08.12Storm   一.Storm简介 Storm是Twitter开源的一个类似于Hadoop的实时数据处理框架.   Storm能实现高频数据和大规模数据的实时处理. 官网资料显示s ...

  3. （转）centos6.5安装VNC

    在Linux下用VNC远程桌面是个很不错的玩意.但在CentOS中默认没有安装VNC的.可以用下面语句查询,如果出现下面情况说明没有安装vnc #rpm -q tigervnc tigervnc-se ...

  4. 多边形剪裁img

    <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>& ...

  5. Windbg调试中遇到的问题

    1.找不到符号文件 抓取完Dump后,打开WinDbg,Ctrl+D找到刚才抓取的Dump文件,报如下异常: *** ERROR: Symbol file could not be found. De ...

  6. Java 对象序列化和反序列化

         之前的文章中我们介绍过有关字节流字符流的使用,当时我们对于将一个对象输出到流中的操作,使用DataOutputStream流将该对象中的每个属性值逐个输出到流中,读出时相反.在我们看来这种行 ...

  7. Linux集群

    集群的起源: 集群并不是一个全新的概念,其实早在七十年代计算机厂商和研究机构就开始了对集群系统的研究和开发.由于主要用于科学工程计算,所以这些系统并不为大家所熟知.直到Linux集群的出现,集群的概念 ...

  8. IOS开发创建开发证书及发布App应用(六)——打包应用

    6.打包应用 如下图,生成之后点击下面红框的按钮,按时间排序,然后点最新的一次生成 从右侧生成日志中找到如下图红框标识的部分,找到 -output ,把下面浅蓝色选中,这是app生成的文件夹路径 点击 ...

  9. cat: can't open '/lib/modules/2.6.35.3-571-gcca29a0/modules.dep': No such file or directory

    在使用modprobe 或者modinfo  cat: can't open '/lib/modules/2.6.35.3-571-gcca29a0/modules.dep': No such fil ...

  10. [SinGuLaRiTy] 米勒罗宾素数判定法

    [SinGuLaRiTy-1003] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 背景 数论学家利用费马小定理研究出了多种素数测试办法,M ...