html5 ajax mvc,Ajax+HTML+Controller(MVC模式下)实现文件异步上传

···········由于案例是使用MVC做的，就直接贴与之相关的代码，原理都是一样的，无论是aspx、ashx或者webservice。

HTML：

@{

Layout = null;

}

Index

* {

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;

}

$(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("上传失败！");

}

}

});

});

});

控制器：

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); } } }

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。