效果图：

代码：（demo33.jsp）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>demo33.jsp</title>

</head>

<body>

<label for="text">名称</label>

<input type="text" id="text" name="name"/>

<label for="file">文件</label>

<input type="file" id="file" name="file"/>

<button type="button" onclick="ajaxUploadFile()">确定</button>

</body>

<script type="text/javascript">

    function ajaxUploadFile() {

        var formData = new FormData();

        var xmlhttp;

        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

            xmlhttp = new XMLHttpRequest();

        }else {// code for IE6, IE5

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

        xmlhttp.open("POST","/data",true);

        xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");

        formData.append("name",document.getElementById("text").value);

        formData.append("file",document.getElementById("file").files[0]);

        xmlhttp.send(formData);

        xmlhttp.onreadystatechange=function() {

            if (xmlhttp.readyState==4) {

                if (xmlhttp.status==200) {

                    console.log("上传成功"+xmlhttp.responseText);

                }else {

                    console.log("上传失败"+xmlhttp.responseText);

                }

            }

        }

    }

</script>

</html>

原生javascript实现文件异步上传的更多相关文章

  1. SpringMVC + AJAX 实现多文件异步上传

    转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...

  2. MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传

    本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  ...

  3. HTML5实现图片文件异步上传

    原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...

  4. 文件的上传（表单上传和ajax文件异步上传）

    项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...

  5. js 文件异步上传 显示进度条 显示上传速度 预览文件

    通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...

  6. 普通文件的上传（表单上传和ajax文件异步上传）

    一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...

  7. 文件的上传（1）（表单上传和ajax文件异步上传）

    文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...

  8. 小程序使用 Promise.all 完成文件异步上传

    小程序使用 Promise.all 完成文件异步上传 extends [微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 - Kindear - 博客园 (cnblogs.com)] ...

  9. 文件上传之——用SWF插件实现文件异步上传和头像截取

    之前写过几篇文件上传,那些都不错.今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传. 使用Flash的好处就是可以解决浏览器兼容性问题.之前我写的一个快捷复制功能也是利用的Fla ...

随机推荐

  1. c++中的while(cin)问题

    xp系统中利用dev-cpp进行编程,语句while(cin>>str),str是个string类型,在一行中输入几个string,末位加个ctrl+z,输入没有结束,除非出入换行后,再输 ...

  2. Java 类 对象 包

    Java类和对象 类是具有相同属性和行为的一组对象的集合.(属性是用来描述对象的特征可以理解为成员变量 例如:一个学生(对象)他的类可能是学校,它的属性可能是学号,姓名,年龄,班级,成绩等等) 例子: ...

  3. 怎么用js或jq点击展开，出现隐藏的DIV,点击收起DIV又隐藏起来.

    方法一:1 <script type="text/javascript"> $(function() { $("#toggle").click(fu ...

  4. gulp打包压缩代码以及图片

    1.首先全局安装gulp 全局安装就不做介绍了 初学gulp,终于把常用的配置,api,语法弄明白了! gulp插件地址:http://gulpjs.com/plugins gulp官方网址:http ...

  5. 解决python3在sublim Text3中中文乱码的问题

    在Tool >> BulidingSystem 中  新建 python3 写入如下代码 { "cmd": ["C:/python3/python.exe&q ...

  6. 「BZOJ3339」Rmq Problem(5366)

    题目描述 输入 输出 样例输入 7 5 0 2 1 0 1 3 2 1 3 2 3 1 4 3 6 2 7 提示 这个题说来也挺有意思的 当时集训的时候遇到了一道类似的题,但是题意与此不同,我太菜了, ...

  7. TensorFlow+实战Google深度学习框架学习笔记（11）-----Mnist识别【采用滑动平均，双层神经网络】

    模型:双层神经网络 [一层隐藏层.一层输出层]隐藏层输出用relu函数,输出层输出用softmax函数 过程: 设置参数 滑动平均的辅助函数 训练函数 x,y的占位,w1,b1,w2,b2的初始化 前 ...

  8. [置顶] 来自 HeroKu 的 HTTP API 设计指南(中文版)

    转载:http://get.jobdeer.com/343.get 来自 HeroKu 的 HTTP API 设计指南(中文版) 翻译 by @Easy 简介 本指南中文翻译者为 @Easy ,他是国 ...

  9. WEBGL学习【九】立方体贴不同的纹理

    <html> <!--开始实现一个三维街景的渲染效果--> <head> <meta http-equiv="Content-Type" ...

  10. docker 私有仓库的两种方式

    1.使用官方默认的registry镜像构建本地仓库 这种方式适用于小规模的镜像仓库储存,没有Ui界面 (1)docker pull registry (2)docker run -d -p 5000: ...