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. WebApi接口请求失败，找不到资源。

    WebApi开发接口,实现同步数据库的数据给安卓. public class UserInfoController : ApiControllerBase { private UserBLL user ...

  2. Objective-C日记-之类别Category

    类别Category 1,概述 为现有类添加新的方法,这些新方法的Objective-C的术语为“类别”. 2,用法 a,声明类别 @interface NSString(NumberConvenie ...

  3. T——SQL基础语句（定义变量，赋值，取值，分支，循环，存储过程）

    T--SQL基础语句 1.定义变量: declare @变量名 数据类型 ; declare @a int ; declare @b  nvarchar(10) ; 2.赋值: 法1:set @变量名 ...

  4. 设置node服务器的端口及运行环境

    一般来说,node服务器中通常会看到这样的代码: ``` app.set('port', process.env.PORT || 3000); if ( process.env.NODE_ENV == ...

  5. web从入门开始（3）-----第一个网页

    <meta>:是进行网页格式初始化的命令,确定网页使用的文本格式和编码格式 Background:中的路径,必须为相对路径 l  HTML文本标记 <b>HTM文本</b ...

  6. Spring——scope详解（转载）

    摘自<spring 解密> scope用来声明IOC容器中的对象应该处的限定场景或者说该对象的存活空间,即在IOC容器在 对象进入相应的scope之前,生成并装配这些对象,在该对象不再处于 ...

  7. 图解Javascript——作用域、作用域链、闭包

    什么是作用域? 作用域是一种规则,在代码编译阶段就确定了,规定了变量与函数的可被访问的范围.全局变量拥有全局作用域,局部变量则拥有局部作用域. js是一种没有块级作用域的语言(包括if.for等语句的 ...

  8. 降低Redis内存占用

    1.降低redis内存占用的优点 1.有助于减少创建快照和加载快照所用的时间 2.提升载入AOF文件和重写AOF文件时的效率 3.缩短从服务器进行同步所需的时间 4.无需添加额外的硬件就可以让redi ...

  9. Java中的常量治理

    版权声明:本文为博主原创文章,转载请注明出处,欢迎使劲喷 虽然推崇在java中使用枚举(可查看<Java中的枚举的治理>)来对数据字典及常量进行控制,但是有些时候,我们还是会觉得常量控制更 ...

  10. 樱花的季节，教大家用canvas画出飞舞的樱花树

    又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...