下面这段代码主要有几个特点:

  1、Ajax提交表单

  2、表单中有一个<input type="file"/>

  3、当选择完图片后,利用AJAX提交表单,并在执行成功后返回图片路径,实现预览图片

<script type="text/javascript">

    $(document).ready(function () {
var form = $("#form1");
$("#file1").change(function () {
$("#form1").ajaxSubmit({
success: function (msg) { alert(msg); $("#img1").attr("src", msg); }
});
});
}); </script> <form id="form1" action="/Home/aa" method="post" enctype="multipart/form-data" >
<input type="file" name="file" onchange="up()" id="file1" />
<img alt="img" id="img1" />
</form>

控制器代码:

//这里只是为了实现效果,没有进行任何验证和处理
public ContentResult aa()
{
HttpPostedFileBase file = Request.Files["file"];
string path = "/Content/"+ System.IO.Path.GetFileName(file.FileName);
file.SaveAs(Path.Combine(Server.MapPath("~/Content"),Path.GetFileName(file.FileName)));
return Content(path);
}

代码狠简单,相信初学者很容易看懂。

【ASP.NET MVC】Ajax提交表单的更多相关文章

  1. MVC中ajax提交表单示例

    页面中: @using (Ajax.BeginForm("Login", "User", new AjaxOptions() { HttpMethod = &q ...

  2. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  3. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  4. MVC中提交表单的4种方式

    一,MVC  HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){} BeginRouteForm ...

  5. Validator验证Ajax提交表单的方法

    Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...

  6. lavarel框架中如何使用ajax提交表单

    开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...

  7. ajax提交表单序列化(serialize())数据

    知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...

  8. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  9. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

随机推荐

  1. 子集系列(二) 满足特定要求的子集,例 [LeetCode] Combination, Combination Sum I, II

    引言 既上一篇 子集系列(一) 后,这里我们接着讨论带有附加条件的子集求解方法. 这类题目也是求子集,只不过不是返回所有的自己,而往往是要求返回满足一定要求的子集. 解这种类型的题目,其思路可以在上一 ...

  2. 子集系列(一) 传统subset 问题,例 [LeetCode] Subset, Subset II, Bloomberg 的一道面试题

    引言 Coding 问题中有时会出现这样的问题:给定一个集合,求出这个集合所有的子集(所谓子集,就是包含原集合中的一部分元素的集合). 或者求出满足一定要求的子集,比如子集中元素总和为定值,子集元素个 ...

  3. Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...

  4. WebAPI IE8、IE9 跨域问题

    关于WebAPI跨域的问题,网上已经很多了,以下方案可以解决很多跨域问题,但是都不支持IE8.IE9浏览器,JSONP也只能支持Get请求 通过dll配置 Install-Package Micros ...

  5. Spring整合JMS(二)——三种消息监听器(转)

    *注:别人那复制来的 1.3     消息监听器MessageListener 在Spring整合JMS的应用中我们在定义消息监听器的时候一共可以定义三种类型的消息监听器,分别是MessageList ...

  6. Spring整合JMS(一)——基于ActiveMQ实现 (转)

    *注:别人那复制来的 1.1     JMS简介 JMS的全称是Java Message Service,即Java消 息服务.它主要用于在生产者和消费者之间进行消息传递,生产者负责产生消息,而消费者 ...

  7. .NET中的异常和异常处理

    .NET中的异常(Exception) .net中的中异常的父类是Exception,大多数异常一般继承自Exception. 可以通过编写一个继承自Exception的类的方式,自定义异常类! 异常 ...

  8. laravel判断是否post传输

    可以用post传输判断form表单是否有值post传过来: if($request->isMethod('post')){ // 要执行的代码 }通过 Request 对象的 isMethod ...

  9. Metasploit 进阶

    本文是"T00LS Metasploit(第二季)"的文档版,是个人在观看视频动手操作的一个记录,仅供学习.文中会介绍Metasploit的一些基本使用:主要包括远程代码执行.MI ...

  10. 2017ACM暑期多校联合训练 - Team 1 1011 HDU 6043 KazaQ's Socks (找规律)

    题目链接 Problem Description KazaQ wears socks everyday. At the beginning, he has n pairs of socks numbe ...