Ajax+HTML+Controller(MVC模式下)实现文件异步上传
2015-06-30 15:11
549 查看
···········由于案例是使用MVC做的，就直接贴与之相关的代码，原理都是一样的，无论是aspx、ashx或者webservice。
HTML：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#all {
border: 1px solid red;
width: 800px;
height: 100px;
margin: 0px auto;
margin-top:100px;
text-align: center;
line-height: 100px;
}
</style>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script>
$(function () {
$("#btnUpload").click(function () {
var formData = new FormData();
formData.append("myfile", document.getElementById("myfile").files[0]);
$.ajax({
url: "/Home/update",
type: "POST",
data: formData,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
if (data == "true") {
alert("上传成功！");
}
else {
alert("上传失败！");
}
}
});
});
});
</script>
</head>
<body>
<div id="all">
<input type="file" id="myfile" />
<input type="button" id="btnUpload" value="上传" />
</div>
</body>
</html>
控制器：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using wode.Models;
namespace wode.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
private ceshiEntities db = new ceshiEntities();
public ActionResult update()
{
Response.ContentType = "text/plain";
if (Request.Files.Count > 0)
{
var myFile = Request.Files["myfile"];
myFile.SaveAs(Server.MapPath("~/Upload/") + myFile.FileName);//保存文件
//保存文件名到数据库（MVC模式下的信息添加-后面取图片显示时用到）
tc t = new tc();
t.tc_img = myFile.FileName;
db.tc.Add(t);
if (db.SaveChanges()>0)
{
return Json("true");
}
}
return Json("false");
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using wode.Models;
namespace wode.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
private ceshiEntities db = new ceshiEntities();
public ActionResult update()
{
Response.ContentType = "text/plain";
if (Request.Files.Count > 0)
{
var myFile = Request.Files["myfile"];
myFile.SaveAs(Server.MapPath("~/Upload/") + myFile.FileName);//保存文件
//保存文件名到数据库（MVC模式下的信息添加-后面取图片显示时用到）
tc t = new tc();
t.tc_img = myFile.FileName;
db.tc.Add(t);
if (db.SaveChanges()>0)
{
return Json("true");
}
}
return Json("false");
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
HTML：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#all {
border: 1px solid red;
width: 800px;
height: 100px;
margin: 0px auto;
margin-top:100px;
text-align: center;
line-height: 100px;
}
</style>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script>
$(function () {
$("#btnUpload").click(function () {
var formData = new FormData();
formData.append("myfile", document.getElementById("myfile").files[0]);
$.ajax({
url: "/Home/update",
type: "POST",
data: formData,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false,
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
success: function (data) {
if (data == "true") {
alert("上传成功！");
}
else {
alert("上传失败！");
}
}
});
});
});
</script>
</head>
<body>
<div id="all">
<input type="file" id="myfile" />
<input type="button" id="btnUpload" value="上传" />
</div>
</body>
</html>
控制器：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using wode.Models;
namespace wode.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
private ceshiEntities db = new ceshiEntities();
public ActionResult update()
{
Response.ContentType = "text/plain";
if (Request.Files.Count > 0)
{
var myFile = Request.Files["myfile"];
myFile.SaveAs(Server.MapPath("~/Upload/") + myFile.FileName);//保存文件
//保存文件名到数据库（MVC模式下的信息添加-后面取图片显示时用到）
tc t = new tc();
t.tc_img = myFile.FileName;
db.tc.Add(t);
if (db.SaveChanges()>0)
{
return Json("true");
}
}
return Json("false");
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using wode.Models;
namespace wode.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
private ceshiEntities db = new ceshiEntities();
public ActionResult update()
{
Response.ContentType = "text/plain";
if (Request.Files.Count > 0)
{
var myFile = Request.Files["myfile"];
myFile.SaveAs(Server.MapPath("~/Upload/") + myFile.FileName);//保存文件
//保存文件名到数据库（MVC模式下的信息添加-后面取图片显示时用到）
tc t = new tc();
t.tc_img = myFile.FileName;
db.tc.Add(t);
if (db.SaveChanges()>0)
{
return Json("true");
}
}
return Json("false");
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 分享微信开发Html5轻游戏中的几个坑
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 再谈Jquery Ajax方法传递到action(补充)
- Dom在ajax技术中的作用说明
- 使用Ajax实时检测"用户名、邮箱等"是否已经存在
- 探讨Ajax中同步与异步之间的区别
- 原生AJAX写法实例分析
- 探秘ajax跨域请求
- Ajax中浏览器和服务器交互详解
- ajax实现点击不同的链接让返回的内容显示在特定div里
- ajax 动态传递jsp等页面使用id辨识传递对象
- AJAX简单应用实例-弹出层
- AJAX初级教程之初识AJAX
- Ajax无刷新分页的性能优化方法
- jquery对ajax的支持介绍
- Ajax 说的比较清楚的一篇文章
- 强烈推荐 - Ajax 技术资源中心
- Ajax PHP简单入门教程代码
- php采用ajax数据提交post与post常见方法总结
- Zend的MVC机制使用分析(二)