首先创建一个网页,网页中添加如下代码。

  <h3>Upload File using Jquery AJAX in Asp.net</h3>
<table>
<tr>
<td>File:</td>
<td>
<asp:FileUpload ID="fupload" runat="server" onchange='prvimg.UpdatePreview(this)' /></td>
<td><asp:Image ID="imgprv" runat="server" Height="90px" Width="75px" /></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnUpload" runat="server" cssClass="button" Text="Upload Selected File" /></td>
</tr>
</table>

接着在添加jquery代码

$("#btnUpload").click(function (evt) {
var fileUpload = $("#fupload").get(0);
var files = fileUpload.files; var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
} $.ajax({
url: "FileUploadHandler.ashx",
type: "POST",
data: data,
contentType: false,
processData: false,
success: function (result) { alert(result); },
error: function (err) {
alert(err.statusText)
}
}); evt.preventDefault();
});

FileUploadHandler.ashx中的代码

<%@ WebHandler Language="C#" Class="FileUploadHandler" %>    

using System;
using System.Web; public class FileUploadHandler : IHttpHandler
{ public void ProcessRequest (HttpContext context)
{
if (context.Request.Files.Count > )
{
HttpFileCollection files = context.Request.Files;
for (int i = ; i < files.Count; i++)
{
HttpPostedFile file = files[i];
string fname = context.Server.MapPath("~/uploads/" + file.FileName);
file.SaveAs(fname);
}
context.Response.ContentType = "text/plain";
context.Response.Write("File Uploaded Successfully!");
} } public bool IsReusable
{
get
{
return false;
}
} }

最后效果如下:

asp.net 中使用JQuery Ajax 上传文件的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  3. ASP.NET中扩展FileUpload的上传文件的容量

    ASP.NET中扩展FileUpload只能上传小的文件,大小在4MB以内的.如果是上传大一点的图片类的可以在web.config里面扩展一下大小,代码如下 <system.web> &l ...

  4. flask jQuery ajax 上传文件

    1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...

  5. 在jquery中,使用ajax上传文件和文本

    function onSubmit (data) { //获取文本 var callingContent = $('#callingContent').val() // 获取文件 var files ...

  6. jquery ajax 上传文件

    html:<!-- /.tab-pane --> <div class="tab-pane" id="head_portrait"> & ...

  7. jquery ajax 上传文件和传递参数到一个接口的实现方法

    参考:https://blog.csdn.net/qq_15674631/article/details/81095284 参考:https://www.jianshu.com/p/46e6e03a0 ...

  8. ASP.NET Jquery+ajax上传文件(带进度条)

    效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...

  9. jQuery Ajax 上传文件改进

    如果用户取消上传后 背景 提示自动消失了.... 修正Bug.... 同时也更新了不同上传类型的提示字体大小... 2017-05-26 增加了鼠标释放提示 先看之前的效果: 再看现在的效果: 升级 ...

随机推荐

  1. 单点登录与消息队列以及在J2EE中的实现方案

    前言 这次为大家简单介绍两个在WEB开发中经常使用的概念——单点登录和消息队列以及具体到J2EE中的一些实现方案.本文原创性的工作比较少,主要是一些总结概括和自己的理解. 单点登录SSO SSO的业务 ...

  2. jquery foreach

    <form id="input_iForm" action="${pageContext.request.contextPath}/transfer/input_s ...

  3. Linux协议栈代码阅读笔记(二)网络接口的配置

    Linux协议栈代码阅读笔记(二)网络接口的配置 (基于linux-2.6.11) (一)用户态通过C库函数ioctl进行网络接口的配置 例如,知名的ifconfig程序,就是通过C库函数sys_io ...

  4. [一位菜鸟的COCOS-2D编程之路]精灵表单的制作以及简易动画的生成

    1.第一步:使用Zwoptex 制作精灵表单 2.制作的表单的名称为 cocos2Dpng,cocos2D.plist: 3.精灵的动画效果 主要分为五部分. // on "init&quo ...

  5. iOS UDID和UUID详解

    这篇是普及知识来了,纯属消遣时间,有需要的可以遛一遛. UDID的全名为 Unique Device Identifier :设备唯一标识符.从名称上也可以看出,UDID这个东西是和设备有关的,而且是 ...

  6. 【iOS知识学习】_iOS动态改变TableView Cell高度

    在做tableView的时候,我们有时候须要依据cell的高度动态来调整.近期在网上看到一段代码不错.跟大家Share一下. 在 -(UITableViewCell *)tableView:(UITa ...

  7. struts2标签具体解释

    要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部增加下面的代码: <%@taglib prefix="s" uri="/struts ...

  8. android学习日记05--Activity间的跳转Intent实现

    Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...

  9. android的进度条使用

    android的进度条 1.实现的效果 2.布局代码 先写一个my_browser.xml文件 存放WebView <?xml version="1.0" encoding= ...

  10. 学习笔记之Linux开发(C语言)

    第二章 Linux下C程序开发环境 vi编辑器 gcc 第三章 Linux基础 Kernel Shell 第三章 Linux技术实验 ls -l 以长格式的形式查看当前目录下所有可见文件的详细属性. ...