原生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 相关文章推荐
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
js实现小时钟效果
Mar 25 Javascript
Vue项目打包编译优化方案
Sep 16 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
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
PHP时间处理类操作示例
2018/09/05 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
详解jquery和vue对比
2019/04/16 jQuery
实现高性能javascript的注意事项
2019/05/27 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Python如何输出整数
2020/06/07 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
美国NBA官方商店:NBA Store
2019/04/12 全球购物
逻辑链路控制协议
2016/10/01 面试题
机修工岗位职责
2013/11/24 职场文书
技术人员面试提纲
2013/11/28 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
客户答谢会活动方案
2014/08/31 职场文书
亮剑精神观后感
2015/06/05 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL