原生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 相关文章推荐
ECMAScript 创建自己的js类库
Nov 22 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
JavaScript ES6的函数拓展
Jan 18 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
自动分页的不完整解决方案
2007/01/12 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
php格式化金额函数分享
2015/02/02 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
JavaScript数据结构之链表的实现
2017/03/19 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
详解Python发送邮件实例
2016/01/10 Python
Python用threading实现多线程详解
2017/02/03 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
django自带调试服务器的使用详解
2019/08/29 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
管理提升方案
2014/06/04 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
行政主管岗位职责
2015/02/03 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
资产移交协议书
2016/03/24 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js