文件的上传(1)(表单上传和ajax文件异步上传)
文件的上传(表单上传和ajax文件异步上传)
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理!
资源下载: 一.jQuery官方下载地址:https://jquery.com/download/ 一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="multipart/form-data">
选择文件:<input type="file" name="file1" /><br />
<input type="submit" value="上传" />
</form>
一般处理程序服务器端: 复制代码
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile file1 = context.Request.Files["file1"];
helper.uploadFile(file1, "~/upload/");//这里就是对相应方法进行调用
context.Response.Write("ok");//提示执行成功
}
复制代码
上传代码的封装: 复制代码
/// <summary>
/// 上传图片
/// </summary>
/// <param name="file">通过form表达提交的文件</param>
/// <param name="virpath">文件要保存的虚拟路径</param>
public static void uploadImg(HttpPostedFile file,string virpath)
{
if (file.ContentLength > 1024 * 1024 * 4)
{
throw new Exception("文件不能大于4M");
}
string imgtype = Path.GetExtension(file.FileName);
if(imgtype!=".jpg"&&imgtype!=".jpeg") //图片类型进行限制
{
throw new Exception("请上传jpg或JPEG图片");
}
using (Image img = Bitmap.FromStream(file.InputStream))
{
string savepath = HttpContext.Current.Server.MapPath(virpath+file.FileName);
img.Save(savepath);
}
}
/// <summary>
/// 上传文件
/// </summary>
/// <param name="file">通过form表达提交的文件</param>
/// <param name="virpath">文件要保存的虚拟路径</param>
public static void uploadFile(HttpPostedFile file, string virpath)
{
if (file.ContentLength > 1024 * 1024 * 6)
{
throw new Exception("文件不能大于6M");
}
string imgtype = Path.GetExtension(file.FileName);
//imgtype对上传的文件进行限制
if (imgtype != ".zip" && imgtype != ".mp3")
{
throw new Exception("只允许上传zip、rar....文件");
}
string dirFullPath= HttpContext.Current.Server.MapPath(virpath);
if (!Directory.Exists(dirFullPath))//如果文件夹不存在,则先创建文件夹
{
Directory.CreateDirectory(dirFullPath);
}
file.SaveAs(dirFullPath + file.FileName);
}
复制代码
二.Ajax文件异步上传: 注明:既然有了表单上传为什么又要ajax上传呢?因为表单上传过程中,整个页面就刷新了!ajax异步上传就可以达到只刷新局部位置,下面就简单看看ajax上传吧! html客户端部分: 复制代码
<head>
<script src="jquery-2.1.4.js"></script>
<script>
$(function () {
$("#upload").click(function () {
$("#imgWait").show();
var formData = new FormData();
formData.append("myfile", document.getElementById("file1").files[0]);
$.ajax({
url: "upload.ashx",
type: "POST",
data: formData,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
if (data.status == "true") {
alert("上传成功!");
}
if (data.status == "error") {
alert(data.msg);
}
$("#imgWait").hide();
},
error: function () {
alert("上传失败!");
$("#imgWait").hide();
}
});
});
});
</script>
</head>
<body>
选择文件:<input type="file" id="file1" /><br />
<input type="button" id="upload" value="上传" />
<img src="wait.gif" style="display:none" id="imgWait" />
</body>
复制代码 一般处理程序服务器端: 复制代码
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
if (context.Request.Files.Count > 0)
{
HttpPostedFile file1 = context.Request.Files["myfile"];
helper.uploadFile(file1, "~/upload/"); //这里引用的是上面封装的方法
WriteJson(context.Response, "true", "");
}
else
{
WriteJson(context.Response, "error", "请选择要上传的文件");
}
}
复制代码
json代码封装: 复制代码
public static void WriteJson(HttpResponse response,
string status1, string msg1, object data1 = null)
{
response.ContentType = "application/json";
var obj = new { status = status1, msg = msg1, data = data1 };
string json = new JavaScriptSerializer().Serialize(obj);
response.Write(json);
}
文件的上传(1)(表单上传和ajax文件异步上传)的更多相关文章
- ajax方式提交带文件上传的表单,上传后不跳转
ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...
- 项目回顾1-图片上传-form表单还是base64-前端图片压缩
第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上 ...
- MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题,答案是不能的!
MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...
- struts2 文件的上传下载 表单的重复提交 自定义拦截器
文件上传中表单的准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设 ...
- Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门
说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...
- 文件的上传(表单上传和ajax文件异步上传)
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
- servlet文件上传2——复合表单提交(数据获取和文件上传)
上传文件时表单enctype属性必须要更改为<enctype='multipart/form-data'>:采用post提交表单,元素需要有name属性: 利用第三方jar包(common ...
- 普通文件的上传(表单上传和ajax文件异步上传)
一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
- 文件上传---form表单,ajax,jquery,以及iframe无刷新上传 (processData,contentType讲解)
服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
随机推荐
- 使用pdo,使用pdo无法插入数据怎么办
如果你使用了最新版的XAMPP,那么你几乎不用改变php.ini的设置,就可以使用pdo but,插了一晚上,程序既不报错也不插入数据,真是气死人,后来发现是实例化pdo对象的时候没有指定字符集.所以 ...
- PyPy初体验
PyPy初体验 PyPy安装 1.下载 下载地址:http://pypy.org/download.html(温馨提示:需要梯子) 下载PyPy3.6 64bit Ubuntu版本 解压 下载下来的文 ...
- ASP.NET MVC5入门指南(1)*入门介绍
以下指南说明了什么是ASP.NET MVC,并说明了如何入门. ASP.NET MVC 5入门 入门 添加控制器 添加视图 添加模型 创建连接字符串并使用SQL Server LocalDB 从控制器 ...
- eclipse导入tomcat时Unknown version of Tomcat was specified
Unknown version of Tomcat was specified 的原因有2种可能: 1 路径不是真正的路径,可能是其子路径,要找到bin路径. 2 安装目录没有访问权限. 我的就是第2 ...
- 剑指Offer-快速排序
剑指Offer上的快速排序的Partition函数与我在数据结构书上学到的不一样,因此就想要探索下这两种不同的处理方式. 1.基本思想 快速排序的基本思想是基于分治法.在待排序表L[1...n]中任取 ...
- 【Python之路】特别篇--Python线程池
版本一: #!/usr/bin/env python # -*- coding:utf-8 -*- import Queue import threading class ThreadPool(obj ...
- HGOI20190808 省常中互测1
Problem A sum 给出$n$个元素的序列$\{a_i\}$,求出两个不相交连续子序列的最大元素和. 即对于$1 \leq A \leq B \leq C \leq D \leq n$最大化 ...
- Jmeter(四)Cookie管理器
上一节中我们用Jmeter通过接口上传了一张图片到人人网,其中请求头中的Cookie是写死的,这个Cookie其实是登录成功后服务器返回给客户端的,客户端接收到这个Cookie后保存下来,在后续向服务 ...
- HDU2433—Travel (BFS,最短路)
Travel Time Limit: 10000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- Unity3D_(API)Quaternion四元数中的Quaternion.LookRotation()
四元数百度百科: 传送门 四元数官方文档: 传送门 欧拉旋转.四元数.矩阵旋转之间的差异: 传送门 四元数转换为欧拉角eulerAngles 官方文档: 传送门 欧拉角转换为四元数Euler 官方文档 ...