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

  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. css等比例分割父级容器(完美三等分)

    html部分代码: 方法一: 浮动布局+百分比 (将子元素依次左浮动,根据子元素的个数,设定每个子元素的宽度百分比) 方法二:行内元素(inline-block)+百分比 方法三: 父元素  disp ...

  2. [DeeplearningAI笔记]卷积神经网络2.2经典网络

    4.2深度卷积网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 [LeNet]--Lécun Y, Bottou L, Bengio Y, et al. Gradient-bas ...

  3. 1.redis设计与实现--简单动态字符串

    1.redis没有使用c语言的字符串表示,而是使用更加适合自己的SDS(simple dynamic string),简单动态字符串,结构如下: 2.sys与c字符串的对比: 3.总结: redis采 ...

  4. 2017北京国庆刷题Day4 afternoon

    期望得分:100+100+0=200 实际得分:5+0+0=5 每加入一个数,x的因数位置++ 注意:根号x枚举时,如果x是完全平方数,根号x会重复累计2次,要减去 考场上没减,5分 /(ㄒoㄒ)/~ ...

  5. 2D旋转和3D旋转

    2D旋转 先给个容器 <p onClick="rotate2D()" id="rotate2D" class="animated_div&quo ...

  6. 引用类型 ( 对象定义 )——Array 类型

    本文地址:http://www.cnblogs.com/veinyin/p/7607293.html  一个数组中可以存储不同类型的值,可以混合存储数字.字符串.对象等 1 创建数组 1.1 构造函数 ...

  7. 大数mod的技巧

    1.mod 3 将各个位上的数字相加对3求余. 2.mod 11 设这个数为abcdefghijklmnopqrst. ans=(t-s+r-q+p-o+n-m+l-k+j-i(以此类推))mod 1 ...

  8. koa源码阅读[3]-koa-send与它的衍生(static)

    koa源码阅读的第四篇,涉及到向接口请求方提供文件数据. 第一篇:koa源码阅读-0第二篇:koa源码阅读-1-koa与koa-compose第三篇:koa源码阅读-2-koa-router 处理静态 ...

  9. UTF8字符串转换为汉字 c#

    using System; /// <summary> /// UTF8字符串转换为汉字用的类 /// 转换如"\\u8d35"之类的字符串为对应的汉字 /// < ...

  10. three.js为何如此奇妙

    WebGL是在浏览器中实现三维效果的一套规范,而最初使用WebGL原生的API来写3D程序是一件非常痛苦的事情,在辛苦的付出下WebGL开源框架出现了,其中three.js就是非常优秀的一个,它掩盖了 ...