效果图：

代码：（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. size_t与size_type的使用

    size_t 是为了方便系统之间的移植而定义的 在32位系统上 定义为 unsigned int在64位系统上 定义为 unsigned long 更准确地说法是 在 32位系统上是32位无符号整形在 ...

  2. 在线场景感知：图像稀疏表示—ScSPM和LLC总结(以及lasso族、岭回归)

    前言: 场景感知其实不分三维场景和二维场景,可以使用通用的方法,不同之处在于数据的形式,以及导致前期特征提取及后期在线场景分割过程.场景感知即是场景语义分析问题,即分析场景中物体的特征组合与相应场景的 ...

  3. 04-手把手教你把Vim改装成一个IDE编程环境(图文)

    Linux下编程一直被诟病的一点是: 没有一个好用的IDE, 但是听说Linux牛人, 黑客之类的也都不用IDE. 但是对我等从Windows平台转移过来的Coder来说, 一个好用的IDE是何等的重 ...

  4. vc++如何创建程序-设置断点-函数的覆盖，c++的多态性

    ---恢复内容开始--- 如何设置断点小笔记 将光标移动到你想设置断点的地方,按一下F9键即可,或者你可以用鼠标左键点击小手图标. CommentOut多行注释 函数的覆盖是在父类与子类之间的,函数的 ...

  5. 路飞学城Python-Day137

    django项目二 个人博客系统 github地址:https://github.com/pandaboy1123/cnblog

  6. 在虚拟机安装Oracle，在本地电脑上运行sql develer出现ora-12514

    问题是解决了,先描述一下,本人用的虚拟机系统是server 2003 1.打开虚拟机,然后不管了 2.打开本地的sql developer,登录,出现了一个小白框:ora-12514:listener ...

  7. keepalived实现IP地址高可用

    yum -y install keepalived vim /etc/keepalived/keepalived.conf global_defs { router_id LVS_DEVEL_ngin ...

  8. jsp三层架构

    学了.net了,它的三层架构很好用.现在学jsp,我们一样可以用三层架构来开发.下面详细介绍 1.创建数据库 drop table MyUser create table MyUser ( id ,1 ...

  9. CNN实现terecord、数据集、模型训练

    AlexNet(Alex Krizhevsky,ILSVRC2012冠军)适合做图像分类.层自左向右.自上向下读取,关联层分为一组,高度.宽度减小,深度增加.深度增加减少网络计算量. 训练模型数据集 ...

  10. Tensorflow MNIST 数据集测试代码入门

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50614444 测试代码已上传至GitH ...