加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 01:57:10 所属栏目:百科 来源:网络整理
导读:···········由于案例是使用MVC做的,就直接贴与之相关的代码,原理都是一样的,无论是aspx、ashx或者webservice。 HTML: @{ Layout = null; } !DOCTYPE html html head meta name="viewport" content="width=device-width" / titleIndex/title s

···········由于案例是使用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); } } }

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读