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. apicloud上传图片

    //定义api $("#photo").change(function(){ //获取图片 api.getPicture({ sourceType: 'library', enco ...

  2. 2017-03-10 T-sql 语句 高级查询

    T-SQL语句: 创建数据库: 1,点击新建查询,在弹出的页面上进行代码编写.点击可用数据库,编写前确定当前操作的页面是自己想要进行操作的界面. 2,数据库创建语句 Create datebase   ...

  3. Node.js web快速入门 -- KoaHub.js组件koa-static-server

    koa-static-server Static file serving middleware for koa with directory, rewrite and index support k ...

  4. [读书系列] 深度探索C++对象模型 初读

    2012年底-2014年初这段时间主要用C++做手游开发,时隔3年,重新拿起<深度探索C++对象模型>这本书,感觉生疏了很多,如果按前阵子的生疏度来说,现在不借助Visual Studio ...

  5. solr 分词词库管理思路

    solr 分词词库管理思路 大概有以下几种思路: 1. 自定义 SolrRequestHandler        由 SolrRequestHandler 来进行对分词器,进行A)词库加载B)动态添 ...

  6. How to set up Tensorflow inception-v3 model on Windows

    There is Inception-v3 model python implementation on GitHub at: https://github.com/tensorflow/models ...

  7. [Open Source] RabbitMQ 安装与使用

    前言 吃多了拉就是队列,吃饱了吐就是栈 使用场景 对操作的实时性要求不高,而需要执行的任务极为耗时:(发送短信,邮件提醒,更新文章阅读计数,记录用户操作日志) 存在异构系统间的整合: 安装 下载 Er ...

  8. python的tkinter版本不匹配问题:RuntimeError: test:tk.h version (8.4) doesn't match libtk.a version (8.5)

    Traceback (most recent call last): File "/root/CodeWorkPace/test/TCPClient.py", line 20, i ...

  9. pcntl_fork 导致 MySQL server has gone away 解决方案

    pcntl_fork 前连数据库,就会报 MySQL server has gone away 错误.原因是子进程会继承主进程的数据库连接,当mysql返回数据时,这些子进程都可以通过这个连接读到数据 ...

  10. 模拟在内存中的数据库DataSet相关的类

    这篇连着上一篇DataReader相关类. 下面两段话是在msdn官网摘下来:       .NET Framework 数据提供程序是专门为数据操作以及快速.只进.只读访问数据而设计的组件.Conn ...