前台页面

 @{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/jquery.form.js"></script>
<title>upload</title>
</head>
<body>
<form id="fileForm" method="post" enctype="multipart/form-data" action="/upload/upload">
文件名称:<input name="fileName" type="text"><br />
上传文件:<input name="myfile" type="file" multiple="multiple"><br />
<input id="submitBtn" type="submit" value="提交">
<img src="#" alt="my img" id="iceImg" width="300" height="300" style="display: block;" />
</form> <input type="text" name="height" value="170" />
<input id="sbtn2" type="button" value="提交表单2"> <input type="text" name="userName" value="" />
<script type="text/javascript">
$(function () {
$("#fileForm").ajaxForm({
//定义返回JSON数据,还包括xml和script格式
//clearForm Boolean值属性,表示是否在表单提交成功后情况表单数据
//dataType 提交成果后返回的数据格式,可选值包括xml,json或者script
//target 服务器返回信息去更新的页面对象,可以是jquery选择器字符串或者jquer对象或者DOM对象。
//type 提交类型可以是”GET“或者”POST“
//url 表单提交的路径
dataType: 'json',
beforeSend: function () {
//表单提交前做表单验证
$("#myh1").show();
},
success: function (data) {
//提交成功后调用
//alert(data.message);
$("#iceImg").attr('src', '/upload/img/' + data.fileName);
$("#myh1").hide();
//防止重复提交的方法
//1.0 清空表单数据
$('#fileForm').clearForm();
//2.0 禁用提交按钮 //3.0 跳转页面
}
}); $("#myfile").change(function () {
$("#submitBtn").click();
}); $("#iceImg").click(function () {
$("#myfile").click();
});
});
</script>
<h1 id="myh1" style="display: none;">加载中...</h1>
</body>
</html>

后台代码

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace IceMvc.Controllers
{
public class UploadController : Controller
{
//
// GET: /Upload/ public ActionResult Index()
{
return View();
} [HttpPost]
public ActionResult Upload()
{
var filesList = Request.Files;
for (int i = ; i < filesList.Count; i++)
{
var file = filesList[i];
if (file.ContentLength > )
{
if (file.ContentLength > )
{
return Content("<script>alert('注册失败!因为您选择图片文件不能大于5M.');window.location='/User/Register';</script>");
} //得到原图的后缀
string extName = System.IO.Path.GetExtension(file.FileName);
//生成新的名称
string newName = Guid.NewGuid() + extName; string imgPath = Server.MapPath("/upload/img/") + newName; if (file.ContentType.Contains("image/"))
{
using (Image img = Image.FromStream(file.InputStream))
{
img.Save(imgPath);
}
var obj = new { fileName = newName };
return Json(obj);
}
else
{
//return Content("<script>alert('注册失败!因为您未选择图片文件.');window.location='/User/Register';</script>");
}
}
} return Content("");
} public ActionResult Afupload()
{
return View();
}
}
}

jquery.form.js实现异步上传的更多相关文章

  1. jquery.form.js 实现异步上传

    前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post&q ...

  2. jquery.form.js ajax提交上传文件

    项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...

  3. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  4. asp.net使用jquery.form实现图片异步上传

    首先我们需要做准备工作: jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar jquery.form.js下载:http://files ...

  5. 解决 jquery.form.js和springMVC上传 MultipartFile取不到信息

    前段页面: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  6. ThinkPHP+JQuery实现文件的异步上传

    前端代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  7. jquery.form 兼容IE89文件上传

    导入部分 <script type="text/javascript" src="js/jquery-1.8.3.min.js" charset=&quo ...

  8. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

  9. PHP JS JQ 异步上传并立即显示图片

    提交页面: <! DOCTYPE html> < html> < head> < meta charset ="GB2312" > ...

随机推荐

  1. silverlighter下MVVM模式中利用Behavior和TargetedTriggerAction实现文本框的一些特效

    在silverlight一般开发模式中,给文本框添加一些事件是轻而易举的,然而MVVM开发模式中,想要给文本框添加一些事件并非那么容易,因为MVVM模式中,只有ICommand接口,而且也只有Butt ...

  2. 难道只有我一个人想吐槽npm这种包管理方式么

    实在忍不住吐槽 说实话有强迫症的我忍了很久了,实在是忍不住写篇文章来吐槽一下. 标题可能说的有点大了,我要吐槽的是:我可能只需要某一个小小的功能模块A,结果模块A依赖B-F这5个模块,然后B又依赖这1 ...

  3. 自制Unity小游戏TankHero-2D(3)开始玩起来

    自制Unity小游戏TankHero-2D(3)开始玩起来 我在做这样一个坦克游戏,是仿照(http://game.kid.qq.com/a/20140221/028931.htm)这个游戏制作的.仅 ...

  4. redis系列-redis的使用场景

    redis越来越受大家欢迎,提升下速度,做下缓存,完成KPI之利器呀.翻译一篇文章<<How to take advantage of Redis just adding it to yo ...

  5. Linux网络编程系列-套接口选项控制

    获取和设置套接口选项的方法有: getsockopt/setsockopt fcntl ioctl getsockopt/setsockopt 这两个函数仅用于套接口(socket)的设置,另外两个函 ...

  6. Bootstrap~Panel和Table

    回到目录 在我们对一个页面进行设计时,分块是必须的,没有一个网站是一栏而下的,除非你是在看小说,否则你的页面设计一定是分块的,即它由于多个panel组件,在bootstrap里叫到栅格系统,而在每行每 ...

  7. Node.js与Sails~Model和ORM的持久化

    回到目录 上一讲说了在sails里定义model及相关参数的说明,这一讲主要说一下如何将你的Model持久化到文件,关系数据库和Nosql数据库里,在持久化这点上,sails是统一管理的,它可以在/c ...

  8. 知方可补不足~sqlserver中的几把锁~续

    回到目录 之前写过相关的文章,对脏读,不可重复读,幻读都做了相当的研究,而今天在程序中又出现了这个问题,即当一条数据被update时,另一个线程同时发起了读的操作,这对于序列化级别的事务是不被允许的, ...

  9. ajax图片上传及FastDFS入门案例.

    今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jqu ...

  10. ToString()的各种用法(大全)

    常用例子: string str = ""; str = .ToString("N"); //生成 12,3456.00 str = .ToString(&qu ...