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 增加了鼠标释放提示 先看之前的效果: 再看现在的效果: 升级 ...
随机推荐
- 单点登录与消息队列以及在J2EE中的实现方案
前言 这次为大家简单介绍两个在WEB开发中经常使用的概念——单点登录和消息队列以及具体到J2EE中的一些实现方案.本文原创性的工作比较少,主要是一些总结概括和自己的理解. 单点登录SSO SSO的业务 ...
- jquery foreach
<form id="input_iForm" action="${pageContext.request.contextPath}/transfer/input_s ...
- Linux协议栈代码阅读笔记(二)网络接口的配置
Linux协议栈代码阅读笔记(二)网络接口的配置 (基于linux-2.6.11) (一)用户态通过C库函数ioctl进行网络接口的配置 例如,知名的ifconfig程序,就是通过C库函数sys_io ...
- [一位菜鸟的COCOS-2D编程之路]精灵表单的制作以及简易动画的生成
1.第一步:使用Zwoptex 制作精灵表单 2.制作的表单的名称为 cocos2Dpng,cocos2D.plist: 3.精灵的动画效果 主要分为五部分. // on "init&quo ...
- iOS UDID和UUID详解
这篇是普及知识来了,纯属消遣时间,有需要的可以遛一遛. UDID的全名为 Unique Device Identifier :设备唯一标识符.从名称上也可以看出,UDID这个东西是和设备有关的,而且是 ...
- 【iOS知识学习】_iOS动态改变TableView Cell高度
在做tableView的时候,我们有时候须要依据cell的高度动态来调整.近期在网上看到一段代码不错.跟大家Share一下. 在 -(UITableViewCell *)tableView:(UITa ...
- struts2标签具体解释
要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部增加下面的代码: <%@taglib prefix="s" uri="/struts ...
- android学习日记05--Activity间的跳转Intent实现
Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...
- android的进度条使用
android的进度条 1.实现的效果 2.布局代码 先写一个my_browser.xml文件 存放WebView <?xml version="1.0" encoding= ...
- 学习笔记之Linux开发(C语言)
第二章 Linux下C程序开发环境 vi编辑器 gcc 第三章 Linux基础 Kernel Shell 第三章 Linux技术实验 ls -l 以长格式的形式查看当前目录下所有可见文件的详细属性. ...