编程 Javascript

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

Posted in Javascript onOctober 26, 2017

效果图：

代码：（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实现文件异步上传的实例讲解

- Author -

冷月葬残花

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用js 让图片在 div或dl里　居中，底部对齐

Jan 21 Javascript

关于jQuery的inArray 方法介绍

Oct 08 Javascript

扩展JavaScript功能的正确方法(译文)

Apr 12 Javascript

常用的JQuery函数及功能小结

Mar 24 Javascript

JS闭包、作用域链、垃圾回收、内存泄露相关知识小结

May 16 Javascript

AngularJS中的JSONP实例解析

Dec 01 Javascript

H5手机端多文件上传预览插件

Apr 21 Javascript

Node.js REPL (交互式解释器)实例详解

Aug 06 Javascript

vue-cli脚手架config目录下index.js配置文件的方法

Mar 13 Javascript

详解Webpack + ES6 最新环境搭建与配置

Jun 04 Javascript

vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

Feb 19 Javascript

JS如何寻找数组中心索引过程解析

Jun 01 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