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. 基于 Koa平台Node.js开发的KoaHub.js的模板引擎代码

    koahub-handlebars koahub-handlebars koahub handlebars templates Installation $ npm install koahub-ha ...

  2. 关于nodeJS多线程的支持，目前看来无法实现，讲解v8的一些东西

    关于这个,我这几天一直在研究,国内关于v8的资料很少,stackoverflow上也不多. 说起来我得说声抱歉,虽然并没有承诺什么.这个功能大概是无法实现.下面我来解释一下为什么. 首先我们要了解一下 ...

  3. C++ 带有指针成员的类处理方式

    在一个类中,如果类没有指针成员,一切方便,因为默认合成的析构函数会自动处理所有的内存.但是如果一个类带了指针成员,那么需要我们自己来写一个析构函数来管理内存.在<<c++ primer&g ...

  4. 百度推送-sitemap-使用playframework框架实现-java

    主动推送的目的是能够把我们高质量内容推送给百度,但是首先你得有一个属于你自己的网站,在百度站长进行验证通过之后,才有资格推送百度sitemap. 百度站长平台为未使用百度统计的站点提供三种验证方式:文 ...

  5. Swift3.0 函数闭包与OC Block

    刚接触Swift,如有不对的点,欢迎指正.转载请说明出处 定义一个基本函数 //定义一个函数,接收一个字符串,返回一个String类型的值 func test(name:String) -> S ...

  6. 解决HTML textarea 标签出现大量空格

    就是什么内容也不写,然后前面却有一堆空格 原因是 textarea标签换行了 <textarea cols=" id="serve_content" name=&q ...

  7. Ubuntu部署Jupyter

    前言 Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言.在本文中,我们将介绍 Jupyter notebook 的主要特 ...

  8. efwplusUI框架，支持在Liunx服务器运行的Web开发框架，C#开发

    efwplusUI开发框架 这是一个简单Web框架,前台采用amaze UI +requireJS+handlebarsJS,后台采用WebApi+MongoDB,用Nginx做Http服务器,随着. ...

  9. iOS开发之清除缓存

    NSFileManager *mgr = [NSFileManager defaultManager]; NSString *cachePath = [NSSearchPathForDirectori ...

  10. JS中new的自定义实现创建实例对象

    我们都知道在JS中通常通过对象字面量和new关键字来创建对象,那么今天我就来给大家讲讲new是怎么创建实例对象的:首先创建一个构造函数: function Person(name,age){ this ...