asp.net使用H5新特性实现异步上传的示例

###index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="Script/jquery-1.10.2.min.js"></script>
  <script src="Script/index.js"></script>
  <title></title>
  <script type="text/javascript">
    $(function(){
      $("#ajaxFileUpload").click(function () {
        formDataUpload();
      });
    });
  </script>
</head>
<body>
  <input type="file" id="FileToUpload" multiple="multiple" mame="FileToUpload" />
  <input type="button" id="ajaxFileUpload" value="上传"/>
  <input type="text" size="10"/>
</body>
</html>

###index.js

function formDataUpload() {
  //这里可以一次性选中多个文件
  var fileUpload = document.getElementById("FileToUpload").files;
  if (fileUpload.length == 0) {
    alert("请选中文件再上传");
    return;
  }
  //html5新特性
  var formdata = new FormData();
  //添加上传数据
  for (var i = 0; i < fileUpload.length;i++){
    formdata.append('files', fileUpload[i]);
  }

  //使用javascript的原生ajax
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("post", 'Handler.ashx?method=formDataUpload');
  xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      alert("上传成功");
    }
  }
  xmlHttp.send(formdata);
}

###handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {

  public void ProcessRequest (HttpContext context) {
    formDataUpload(context);
  }
  public static void formDataUpload(HttpContext context) {
    //获取到客户端提交的文件
    HttpFileCollection files = context.Request.Files;
    string msg = string.Empty;
    string error = string.Empty;
    int fileM = 0;
    if (files.Count > 0) {
      for (int i = 0; i < files.Count; i++) {      ;
        String path = @"D:\"+files[i].FileName;
        files[i].SaveAs(path);
        fileM += files[i].ContentLength;
      }
      msg = "上传成功，文件总大小:" + fileM;
      string res = "{error :'" + error + "',msg:'" + msg + "'}";
      context.Response.Write(res);
      context.Response.End();
    }
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
}

以上这篇asp.net使用H5新特性实现异步上传的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • asp.net+ajaxfileupload.js 实现文件异步上传代码分享
  • asp.net 无刷新附件上传实现方法
赞 (0)

相关推荐

  • asp.net+ajaxfileupload.js 实现文件异步上传代码分享

    由于代码很简单,这里就闲话不多说了,直接上代码,小伙伴们自己研读代码就明白了. 前台代码: 复制代码 代码如下: /*修改头像*/      //上传      function _sc() {          $(".ckfile").html("").css("color", "#535353");          $("#_userImgPath").val("");     

  • asp.net 无刷新附件上传实现方法

    asp.net 无刷新附件上传实现方法

    最近参照网上的一些资料,初步到达了预期目标(客户端获取上传进度,还没发现什么好的方法,没有实现),利用iframe实现了附件的无刷新上传效果(其实有提交iframe),为了使用方便,最后做成了,.net用户自定义控制: 控件使用示例: 控件页面效果只是"添加附件"的图片,运行效果图一: 点击图片弹出文件选择框,运行效果图二 选中文件打开,文件开始上传,点击"停止"按钮,"正在上传"变为"等待上传","停止"

  • asp.net使用H5新特性实现异步上传的示例

    ###index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="Script/jquery-1.10.2.min.js"></script> <script src="Script/index.js"></script> <title><

  • jquery uploadify和apache Fileupload实现异步上传文件示例

    jQuery Uploadify + Apache Fileupload异步上传文件示例1.可以限制上传文件大小和类型,理论上任何类型的文件都可以上传(自己根据api配置即可):2.后台使用Apache commons-fileupload-1.3.1.jar作为上传工具包,本示例支持一次性多文件上传:3.文件上传目录可以任意指定,请在web.xml中配置:Uploadify api 详见http://www.uploadify.com/documentation/ FileUploadServ

  • springmvc利用jquery.form插件异步上传文件示例

    springmvc利用jquery.form插件异步上传文件示例

    需要的下载文件: jQuery.form.js jquery.js commons-fileupload.jar commons-io.jar 示例图片 pom.xml <!-- 文件上传 --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3</ve

  • 详解ES9的新特性之异步遍历Async iteration

    异步遍历 在讲解异步遍历之前,我们先回想一下ES6中的同步遍历. 根据ES6的定义,iteration主要由三部分组成: Iterable 先看下Iterable的定义: interface Iterable { [Symbol.iterator]() : Iterator; } Iterable表示这个对象里面有可遍历的数据,并且需要实现一个可以生成Iterator的工厂方法. Iterator interface Iterator { next() : IteratorResult; } 可

  • asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)

    本文实例讲述了asp.net+jquery.form实现图片异步上传的方法.分享给大家供大家参考,具体如下: 首先我们需要做准备工作: jquery 点击此处本站下载. jquery.form.js 点击此处本站下载. 页面JqueryFormTest.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryFormTest.aspx.cs" Inherits=

  • asp.net下实现支持文件分块多点异步上传的 Web Services

    本文的客户端应用程序不包括 ASP.Net Web 应用程序! 本文假设 URL: http://localhost/mywebservices/updownload.asmx 共有 4 个程序文件 (Web.Config 就不赘述了) Server Side: 标题中所提到的 "异步" 其实在服务器端的程序并没有什么特殊的,而主要是通过客户端应用程序 异步调用相关 Web Method 实现的! 1. updownload.asmx ,位于 IIS 的某个 Web 共享目录,代码如下

  • ES11屡试不爽的新特性,你用上了几个

    ES11规范于今年的年初完成,引入了许多新标准,本文讲着重研究下其中几个实用且有趣的新标准 特性抢先知: 私有变量 Promise.allSettled BigInt 全新的数据类型 Nullish Coalescing Operator 空位合并运算符 Optional Chaining Operator 可选链运算符 Dynamic Import 动态导入 String.prototype.matchAll 新增matchAll globalThis 新增全局对象 Module Namesp

  • ASP.NET WebAPi（selfhost）实现文件同步或异步上传

    ASP.NET WebAPi（selfhost）实现文件同步或异步上传

    前言 前面我们讲过利用AngularJs上传到WebAPi中进行处理,同时我们在MVC系列中讲过文件上传,本文结合MVC+WebAPi来进行文件的同步或者异步上传,顺便回顾下css和js,MVC作为客户端,而WebAPi利用不依赖于IIS的selfhost模式作为服务端来接收客户端的文件且其过程用Ajax来实现,下面我们一起来看看. 同步上传 多余的话不用讲,我们直接看页面. <div class="container"> <div> @if (ViewBag.

  • JavaScript中三种异步上传文件方式

    异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpRequest2来实现异步上传. 第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度. 第二种使用隐藏的iframe模拟异步上传.为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使

  • 简述Java异步上传文件的三种方式

    本文为大家分享了三种Java异步上传文件方式,供大家参考,具体内容如下 用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpRequest2来实现异步上传. 第一种使用浏览器插件上传,需要一定的底层编码功底,在这里我就不讲了,以免误人子弟,提出这点大家可以自行百度. 第二种使用隐藏的iframe模拟异步上传.为什么在这里说的是模拟呢?因为我们其实是将返回结果放在了一个隐藏的iframe中,所以才没有使当前页面跳转,感觉就像是异步操

随机推荐