原生javascript实现文件异步上传的实例讲解


Posted in Javascript onOctober 26, 2017

效果图:

原生javascript实现文件异步上传的实例讲解

代码:(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实现文件异步上传的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
JavaScript基础之this详解
Jun 04 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 #Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 #Javascript
js插件实现图片滑动验证码
Sep 29 #Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 #Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 #Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 #Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 #Javascript
You might like
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
JQUERY获取form表单值的代码
2010/07/17 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
劳模先进事迹材料
2014/12/24 职场文书
法人身份证明书
2015/06/18 职场文书
毕业证明模板
2015/06/19 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL