1.Form表单提交

<p>Form提交</p>
<form action="@Url.Action("SavePictureByForm")" enctype="multipart/form-data" method="post">
<input id="pic" name="pic" type="file" />
<input type="submit" value="提交" />
</form>

2.Ajax.BeginForm,原理也是Form表单提交

<p>Ajax.BeginForm</p>
@using(Ajax.BeginForm("SavePictureByForm", null, new AjaxOptions() { OnSuccess = "PostSuc", OnFailure = "PostFail", HttpMethod = "Post"}, new {enctype = "multipart/form-data"}))
{
<input type="file" name="pic" id="pic" multiple="multiple" />
<input type="submit" value="提交" />
}

以上两种方式,在后台用同一种方法可以获取数据: 但是这两种方法会造成页面刷新,有时会影响用户操作.

 public ActionResult SavePictureByForm()
{
HttpFileCollectionBase files = Request.Files;
var file = files[0];
bool isOk = false;
string msg = string.Empty;
//....OtherDO return Content("<script>window.location.href='/home/index';</script>");
}

3.Ajax提交  用此方法需要用到FileReader类,再获取到文件的Base64数据,将Base64数据Post过去

<p>Ajax:以上传图片为例</p>
<input type="file" id="picAjax"/>
<input type="button" id="submitPic" value="提交" />
<img id="selImg" src="" alt="用作图片预览" />
    var picString = "";
$(function () {
$("#picAjax").change(function (e) {
var file = e.delegateTarget.files[0];
//在此可以对选择的文件进行判断:文件类型 文件大小等
//..... var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (ret) {
picString = reader.result
//预览图片
$("#selImg").attr({ "src": picString });
}
}); $("#submitPic").click(function () {
$.ajax("home/SavePicture", {
type: "post",
datatype: "json",
data: picString,
error: function () { },
success: function (result) {
if (result) {
alert(result.msg);
}
}
});
});

后端接收

 [HttpPost]
public ActionResult SavePicture(string picString)
{
bool isOk = false;
string msg = string.Empty;
//其他操作
//.........
//.........
return Json(new { suc = isOk, msg = msg });
}

第三种方法做到了真正异步提交.但是如果选择的文件较大,可能会出现问题(未测试).

对于图片预览 前两种方法也可用base64数据进行图片预览.

ASP.NET MVC上传文件的几种方法的更多相关文章

  1. asp.net MVC 上传文件 System.Web.HttpException: 超过了最大请求长度

    APS.NET MVC 上传文件出现  System.Web.HttpException: 超过了最大请求长度 这个问题 原因是 默认最大上传文件大小为4096,而我提交的文件太大了. 解决方案:修改 ...

  2. ASP.NET MVC上传文件----uploadify的使用

    课程设计需要实现上传文件模块,本来ASP.NET是有内置的控件,但是ASP.NET MVC没有,所以就有两种方法:自定义和采用第三方插件.由于时间的关系,故采用第三方插件:uploadify. upl ...

  3. ASP.NET MVC上传文件

    最近参考网络资料,学习了ASP.NET MVC如何上传文件.最基本的,没有用jQuery等技术. 1.定义Model public class TestModel    {        [Displ ...

  4. asp.net mvc 上传文件

    转至:http://www.cnblogs.com/fonour/p/ajaxFileUpload.html 0.下载 http://files.cnblogs.com/files/fonour/aj ...

  5. asp.net 客户端上传文件全路径获取方法

    asp.net  获取客户端上传文件全路径方法: eg:F:\test\1.doc 基于浏览器安全问题,浏览器将屏蔽获取客户端文件全路径的方法,只能获取到文件的文件名,如果需要获取全路径则需要另想其他 ...

  6. ASP.NET上传文件的几种方法

      //上传文件实例 if (fileDealer.HasFile)//判断文件是否存在        {            string filepath = "";     ...

  7. net上传文件的三种方法

    ASP.NET依托.net framework类库,封装了大量的功能,使得上传文件非常简单,主要有以下三种基本方法. 方法一:用Web控件FileUpload,上传到网站根目录. Test.aspx关 ...

  8. GitHub常用上传文件的两种方法 附带常见的问题及Git安装教程

    从早上下课到现在一直在琢磨如何给Github下载本地文件,中午饭都没吃.还好是解决了,感觉挺有成就感的.O(∩_∩)O哈哈~ 好哒 闲话不说,说重点. 一.git的安装 百度云:http://pan. ...

  9. ASP.NET MVC上传文件 未显示页面,因为请求实体过大。解方案

    在Dropzone中设置   maxFilesize: 350, //MB 但上传的文件没有到最大限定350MB,就报出来 未显示页面,因为请求实体过大的错误 Web.config中设置  maxAl ...

随机推荐

  1. 解决使用angularjs时页面因为{{ }}闪烁的两种方式ng-bind,ng-cloak

    1.HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of Unrendered Content,FOUC).我可以用ng-bind将内容同元素绑定在一起避免F ...

  2. [置顶] 让你的Android应用与外部元素互动起来

    传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 一个Android应用程序通常有几个activities.每个act显示一个用户接口允 ...

  3. query等待ajax执行完毕再继续执行下面代码的操作

    Jquery等待ajax执行完毕再继续执行下面代码的效果,具体代码如下,其实就是将 jquery ajax 函数的 async 参数设置为 false 即可,该参数默认为 true: $(docume ...

  4. 全排列算法之Perm算法实现

    题目描述:   给定一个由不同的小写字母组成的字符串,输出这个字符串的所有全排列.   我们假设对于小写字母有'a' < 'b' < … < 'y' < 'z',而且给定的字符 ...

  5. error on line 1 at column 6: XML declaration allowed only at the start of the document

    This page contains the following errors: error on line 1 at column 6: XML declaration allowed only a ...

  6. 转:VmWare下安装CentOS6图文安装教程

    文章来自于:http://www.cnblogs.com/seesea125/archive/2012/02/25/2368255.html 查看文章索引请通过http://www.cnblogs.c ...

  7. (摘)Chart属性设置

    Chart ChartBorder 图表区域的边框设置 ChartFill 图表区域的背景填充 Legend 图表的注释标签显示设置项目,一组数据对应一种颜色的注释 IsHStack 当有多个显示项的 ...

  8. @Valid springMVC bean校验不起作用及如何统一处理校验

    SpringMVC 使用JSR-303进行校验 @Valid 使用注解 一.准备校验时使用的JAR validation-api-1.0.0.GA.jar:JDK的接口: hibernate-vali ...

  9. 【HDOJ】1493 QQpet exploratory park

    超水的动态规划.最后要对概率求Sigma. #include <cstdio> #include <cstring> #include <cstdlib> #def ...

  10. 【转】[c/c++ ]字节序与大小端转换--不错

    原文网址:http://blog.csdn.net/kuai0705/article/details/20841133 注明: 以下内容均为学习内容整理,记录,便于自己学习,并非完全意义上的自产,如有 ...