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

 更新时间:2017年10月26日 08:28:35   作者:冷月葬残花  
下面小编就为大家带来一篇原生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实现文件异步上传的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • js父窗口关闭时子窗口随之关闭完美解决方案

    js父窗口关闭时子窗口随之关闭完美解决方案

    admin注销的时候,或者main.html关闭的时候,如何让打开的所有新窗口一起关闭,下面有个不错的解决方案,大家可以参考下
    2014-04-04
  • bootstrap 弹出框modal添加垂直方向滚轴效果

    bootstrap 弹出框modal添加垂直方向滚轴效果

    这篇文章主要介绍了bootstrap 弹出框modal添加垂直方向滚轴效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 微信WeixinJSBridge API使用实例

    微信WeixinJSBridge API使用实例

    这篇文章主要介绍了微信WeixinJSBridge API使用实例,本文直接给出HTML代码,代码中包含了很多实用功能,如图片预览、分享到微博、隐藏右上角按钮、获取网络状态、发起公众号微信支付等内容,需要的朋友可以参考下
    2015-05-05
  • javascript算法解数独实现方案示例

    javascript算法解数独实现方案示例

    这篇文章主要为大家介绍了javascript算法解数独实现方案示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Typescript实现栈的方法示例

    Typescript实现栈的方法示例

    本文主要介绍了Typescript实现栈的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • 强大的JavaScript响应式图表Chartist.js的使用

    强大的JavaScript响应式图表Chartist.js的使用

    本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • javascript定义变量时带var与不带var的区别分析

    javascript定义变量时带var与不带var的区别分析

    这篇文章主要介绍了javascript定义变量时带var与不带var的区别,以一个简单实例分析了变量定义时带var与不带var的执行原理及用法区别,需要的朋友可以参考下
    2015-01-01
  • 详解javascript脚本何时会被执行

    详解javascript脚本何时会被执行

    这篇文章主要介绍了详解javascript脚本何时会被执行,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2021-02-02
  • 浅谈TypeScript的类型保护机制

    浅谈TypeScript的类型保护机制

    这篇文章主要介绍了浅谈TypeScript的类型保护机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • javascript:FF/Chrome与IE动态加载元素的区别说明

    javascript:FF/Chrome与IE动态加载元素的区别说明

    今天在写一段js时,发现IE与FF在动态加载Html元素时,有一些差别,一起过来看看下面的代码吧
    2014-01-01

最新评论