asp.net 中使用JQuery Ajax 上传文件
首先创建一个网页,网页中添加如下代码。
<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 上传文件的更多相关文章
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- jQuery ajax上传文件实例
jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...
- ASP.NET中扩展FileUpload的上传文件的容量
ASP.NET中扩展FileUpload只能上传小的文件,大小在4MB以内的.如果是上传大一点的图片类的可以在web.config里面扩展一下大小,代码如下 <system.web> &l ...
- flask jQuery ajax 上传文件
1.html 代码 <div> <form id="uploadForm" enctype="multipart/form-data" > ...
- 在jquery中,使用ajax上传文件和文本
function onSubmit (data) { //获取文本 var callingContent = $('#callingContent').val() // 获取文件 var files ...
- jquery ajax 上传文件
html:<!-- /.tab-pane --> <div class="tab-pane" id="head_portrait"> & ...
- jquery ajax 上传文件和传递参数到一个接口的实现方法
参考:https://blog.csdn.net/qq_15674631/article/details/81095284 参考:https://www.jianshu.com/p/46e6e03a0 ...
- ASP.NET Jquery+ajax上传文件(带进度条)
效果图 支持ie6+,chrome,ie6中文文件名会显示乱码. 上传时候会显示进度条. 需要jquery.uploadify.js插件,稍后会给出下载 前台代码 <%@ Page Langua ...
- jQuery Ajax 上传文件改进
如果用户取消上传后 背景 提示自动消失了.... 修正Bug.... 同时也更新了不同上传类型的提示字体大小... 2017-05-26 增加了鼠标释放提示 先看之前的效果: 再看现在的效果: 升级 ...
随机推荐
- AD板层定义介绍(二)
1.顶层信号层(Top Layer):也称元件层,主要用来放置元器件,对于比层板和多层板可以用来布线: 2.中间信号层(Mid Layer): 最多可有30层,在多层板中用于布信号线. 3.底层信号层 ...
- [iOS基础控件 - 6.6] 展示团购数据 自定义TableViewCell
A.需求 1.头部广告 2.自定义cell:含有图片.名称.购买数量.价格 3.使用xib设计自定义cell,自定义cell继承自UITableViewCell 4.尾部“加载更多按钮”,以及其被点击 ...
- MVC4的bundling功能简介
Bundling and Minification是asp.net mvc4中一项可以减少用户请求等待时间,提升用户体验的一项技术.在VS2010中新建MVC4项目是,如果选择"基本&quo ...
- 转载 ASP.NET常用的正则表达式
转载原地址: http://www.cnblogs.com/0001/archive/2010/01/26/1656677.html 常用表达式: "^\d+$" //非负整数(正 ...
- FreeModbus for stm32(Keil工程)——精简Modbus slave协议【worlsing笔记】
FreeModbus For stm32:点击下载源码 1.测试环境Keil MDK 4.7a stm32f103c8, PB12为输出线圈, 可以通过Modbus Poll来控制线圈的输出状 ...
- SCALA编程实例
SCALA与JAVA很相似,包括类.函数.集合等等的使用.如果你是一个JAVA程序员,你应该会很快上手. 需要注意的是SCALA特有的一些奇葩标志,比如->,比如=>,遇到要注意下. 使用 ...
- C#抽象工厂模式的几种实现方法及比较
C#抽象工厂模式的几种实现方法及比较 本文转自:http://hi.baidu.com/tufeivista/blog/item/2ca9702978dcc6fb99250a81.html 利用设计模 ...
- How good software makes us stupid?
How good software makes us stupid? 科技是怎样让人变傻的? People assume that iPhones, laptops and Netflix are e ...
- Spring技术内幕:Spring AOP的实现原理(二)
**二.AOP的设计与实现 1.JVM的动态代理特性** 在Spring AOP实现中, 使用的核心技术时动态代理.而这样的动态代理实际上是JDK的一个特性.通过JDK的动态代理特性,能够为随意Jav ...
- 实现android activity之间的跳转
android程序一般不会只有一个activity,会碰到activity之间的跳转.以下是使用Intent做应用程序内部的activity做跳转.比如,应用程序第一个activity是: 点击“下一 ...