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

  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. How to reset XiaoMi bluetooth headphone Youth edition.

    To reset the speaker 1. Long press the phone call button to shut off the speaker 2. Connect the char ...

  2. NYOJ 141 Squares (数学)

    题目链接 描述 A square is a 4-sided polygon whose sides have equal length and adjacent sides form 90-degre ...

  3. 组合数+逆元 A - Chat Group Gym - 101775A

    题目链接:https://cn.vjudge.net/contest/274151#problem/A 具体思路:我们可以先把所有的情况算出来,为2^n.然后不合法的情况减去就可以了.注意除法的时候要 ...

  4. Mac nginx 配置

    nginx 安装: 在苹果系统下如果要安装nginx,首先要安装brew.安装brew可以查看网站:https://brew.sh: 一条命令即可搞定:/usr/bin/ruby -e "$ ...

  5. 利用__attribute__((section()))构建初始化函数表【转】

    转自: https://mp.weixin.qq.com/s?__biz=MzAwMDUwNDgxOA==&mid=2652663356&idx=1&sn=7797629530 ...

  6. Linux中fork()函数的底层实现【转】

    转自:http://blog.csdn.net/duoru_xiong/article/details/76358812 1. fork(),vfork(),clone()的区别 这三个系统调用的底层 ...

  7. React 16 源码瞎几把解读 【三 点 一】 把react组件对象弄到dom中去(矛头指向fiber,fiber不解读这个过程也不知道)

    一.ReactDOM.render 都干啥了 我们在写react的时候,最后一步肯定是 ReactDOM.render( <div> <Home name="home&qu ...

  8. Machine Learning系列--EM算法理解与推导

    EM算法,全称Expectation Maximization Algorithm,译作最大期望化算法或期望最大算法,是机器学习十大算法之一,吴军博士在<数学之美>书中称其为“上帝视角”算 ...

  9. PlantUML——1.Hello

    官网: http://www.plantuml.com/ 第一步: 下载 plantuml.jar文件: 第二步:创建一个demo.txt文件(与plantuml.jar在同一目录),内容如下: @s ...

  10. struct中长度为0的数组用途与原理

    前言 在标准C和C++中,长度为0的数组是被禁止使用的.不过在GNUC中,存在一个非常奇怪的用法,那就是长度为0的数组,比如Array[0]; 很多人可能觉得不可思议,长度为0的数组是没有什么意义的, ...