ajax实现文件表单上传,ajax文件异步实现表单上传
这次给大家带来ajax文件异步实现表单上传,ajax文件异步实现表单上传的注意事项有哪些,下面就是实战案例,一起来看一下。
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理!
资源下载:
一、jQuery官方下载地址:https://jquery.com/download/
一.表单上传:
html客户端部分:
选择文件:
一般处理程序服务器端:public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
HttpPostedFile file1 = context.Request.Files["file1"];
helper.uploadFile(file1, "~/upload/");//这里就是对相应方法进行调用
context.Response.Write("ok");//提示执行成功
}
上传代码的封装:///
/// 上传图片
///
/// 通过form表达提交的文件
/// 文件要保存的虚拟路径
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);
}
}
///
/// 上传文件
///
/// 通过form表达提交的文件
/// 文件要保存的虚拟路径
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客户端部分:
$(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();
}
});
});
});
选择文件:
一般处理程序服务器端: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);
}
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
AjaxFileUpload怎么动态的添加文件上传框
Ajax和jsonp在项目中的实战总结
ajax实现文件表单上传,ajax文件异步实现表单上传相关推荐
- 如何异步提交表单 如何异步跨域提交表单
1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 代码: 使用 jQuery 异步提交表单 <html xmlns="http ...
- ajax上传文件表单,图片、文件无刷新上传,jquery.form.js的使用
我们在进行一些web开发时,有时会需要上传文件,图片等等的功能.这篇文章记录一下我实现用ajax实现无刷新上传图片的方法. 我们先要了解一下ajax,在前后端分离的开发环境中ajax被广泛的用原来前后 ...
- 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html...
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){... },&quo ...
- django(7)modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用...
一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts importr ...
- js实现多图上传和预览(包含表单上传、ajax上传)
请在这里查看示例 ☞ h5Upload示例 包含的知识点有:(仅考虑手机端,pc兼容性不清,建议使用jquery版本的) 1.浏览器自带的表单上传(页面会跳转) 2.ajax上传(异步刷新.自动上传. ...
- ajax servlet增删改查,Servlet ajax 文件上传和JDBC+Servler用户表增删改查
昨天晚上帮一个妹子,应该是大二或者大三的.解决了Servlet+JDBC实现用户表的增删改查功能,当时妹子遇到的问题是文件上传和日期格式处理不太会. 我让她把代码发我,我本地调试,结果发现坑很多,就是 ...
- themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传 (非常详细,从创建项目开始)...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码 配置文 ...
- 使用Servlet和Bootstrap上传Ajax文件
介绍 在本教程中,我们将检查Ajax文件上传如何与Servlet一起使用. 同样,我们将用Bootstrap装饰表单并通过jQuery Ajax上传ajaxify文件. 实作 基本的servlet实现 ...
- koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- dwz 表单提交 html,dwz 文件上传表单提交 分析
众所周知,因为Ajax不支持enctype="multipart/form-data".所以如果想采用无刷新的方式提交文件,Ajax是不行的.采用变通,也是最简单有效的方式是在页面 ...
最新文章
- FFmpeg入门之常用命令
- hdu5438(2015长春网络赛B题)
- 集合框架 Queue---ArrayBlockingQueue
- mysql 5.7 insert_MySQL5.7 支持一个表有多个INSERT/DELETE/UPDATE触发器
- JAVA:网络编程总结
- java bitset_Java BitSet nextSetBit()方法与示例
- enable 华为交换机ntdp_华为交换机配置
- 雾山五行专题高清壁纸,绝美动漫场景
- Calendar(显示日期)
- java学习笔记宋红康版本-01
- 拉钩网前端项目实战01
- App下载的视频导进电脑中生成.mp4文件的方法
- InsetGAN :基于多个stylegan2-ada生成器拼接的全身人像生成(2203.InsetGAN for Full-Body Image Generation)
- HTML基础知识点总结三
- 基于Snort的入侵检测系统
- Java接入微信支付超级详细教程——从入门到精通
- 算法刷题——字符串| 给定一个字符类型数组chas[],判断chas中是否所有的字符都只出现过一次
- ios文件app访问samba服务器,ios链接samba服务器
- Forecasting Principles And Practice(预测,方法与实践在线阅读)
- AI ProCon圆满落幕,五大技术专场精彩瞬间不容错过
热门文章
- bash快捷建-光标移到行首、行尾等
- 噢,原来SpringCloud是这样的呀!
- 作业帮冯雪胡不归问题_作业帮学习平台微信服务号关注
- Qt基础-QTreeView简单demo、视图模型、坐标位置对应关系介绍等
- c语言程序设计设计题题库,C语言程序设计题库.doc
- VB.Net视频教程和VBA简单介绍下载
- 安装好jdk后在cmd窗口输入Java 出现Error: could not open `D:\java2\lib\amd64\jvm.cfg'
- Java实现俄罗斯方块小游戏。(附完整源代码)
- qq永久封号 代码_避免在代码中永久保留这些内容
- ftp同步软件android,[Android ]FTP/SCP/FTPS客户端AndFTP v4.5专业版 开心版