HTML代码 和js 代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/js/jquery-1.8.3.min.js"></script>
<script src="~/js/ajaxfileupload.js"></script>
<script type="text/javascript">
$(function () {
$("#butLoad").click(function () {
$("#img1").attr("src", "../images/timg.gif");
//调用action
$.ajaxFileUpload({
url: "../Upload/UpLoad",
secureuri: false, //一般设置为false
fileElementId: ‘Img‘, //文件上传空间的id属性 <input type="file" id="Img" name="file" />
dataType: ‘json‘, //返回值类型
success: function (data, status) //服务器成功响应处理函数
{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != ‘undefined‘) {
if (data.error != ‘‘) {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
});
});
$("#butLoadAsp").click(function () {
$("#imgAsp").attr("src", "../images/timg.gif");
//调用aspx
$.ajaxFileUpload({
url: "../Ajax/UpLoad.aspx?__Action=UpLoadImg",
secureuri: false, //一般设置为false
fileElementId: ‘ImgAsp‘, //文件上传空间的id属性 <input type="file" id="Img" name="file" />
dataType: ‘json‘, //返回值类型
success: function (data, status) //服务器成功响应处理函数
{
$("#imgAsp").attr("src", data.imgurl);
if (typeof (data.error) != ‘undefined‘) {
if (data.error != ‘‘) {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
});
});
});
function ChImages(obj) {
$("#img1").attr("src", obj.value)
}
</script>
</head>
<body>
<div>
<h3>mvc-ajax</h3>
<input type="file" id="Img" name="file" onchange="ChImages(this)" /> @*注意：name一定要写*@
<button id="butLoad">上传</button>
<img src="" id="img1" alt="请选择图片" width="200" />
</div>
<div>
<h3>asp.net-ajax</h3>
<input type="file" id="ImgAsp" name="file" /> @*注意：name一定要写*@
<button id="butLoadAsp">上传</button>
<img src="" id="imgAsp" alt="请选择图片" width="200" />
</div>
</body>
</html>
mvc 控制中代码
[HttpPost]//过滤
public JsonResult UpLoad()
{
HttpFileCollectionBase files = Request.Files;//这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
object result = new { error="error", msg="上传失败",imgurl= files[0].FileName};
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > 0)
{
string savePath = Server.MapPath("/") + "UpLoadImg\\";//保存文件地址
//string saveDir = System.Web.HttpContext.Current.Server.MapPath(savePath);
if (!Directory.Exists(savePath)) {
Directory.CreateDirectory(savePath);
}
files[0].SaveAs(savePath + System.IO.Path.GetFileName(files[0].FileName));
msg = " 成功! 文件大小为:" + files[0].ContentLength;
imgurl = "../UpLoadImg/" + files[0].FileName;
result =new { error="success", msg= msg, imgurl=imgurl };
}
return Json(result, "text/html");
}
aspx.cs 代码
public partial class UpLoad : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string action = Request["__Action"];
if (action==null || action == string.Empty)
return;
Page p = this;
Type pageType = p.GetType();
MethodInfo method = pageType.GetMethod(action);
if (method != null)
method.Invoke(p, null);
}
public void UpLoadImg()
{
HttpFileCollection files = Request.Files;//这里只能用<input type="file" />才能有效果,因为服务器控件是HttpInputFile类型
// object result = new { error = "error", msg = "上传失败", imgurl = files[0].FileName };
string result = "{ error:‘error‘, msg:‘上传失败‘,imgurl:‘" + files[0].FileName + "‘}";
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > 0)
{
string savePath = Server.MapPath("/") + "UpLoadImg\\";//保存文件地址
//string saveDir = System.Web.HttpContext.Current.Server.MapPath(savePath);
if (!Directory.Exists(savePath))
{
Directory.CreateDirectory(savePath);
}
files[0].SaveAs(savePath + System.IO.Path.GetFileName(files[0].FileName));
msg = " 成功! 文件大小为:" + files[0].ContentLength;
imgurl = "../UpLoadImg/" + files[0].FileName;
result = "{ error:‘" + error + "‘, msg:‘" + msg + "‘,imgurl:‘" + imgurl + "‘}";
}
Response.Clear();
Response.Write(result.ToString());
Response.End();
}
}
MVC和aspx 有些不同，MVC获取HttpInputFile 用HttpFileCollectionBase 类，aspx获取HttpInputFile 用HttpFileCollection 类
个人学习，请多多指教
代码：http://files.cnblogs.com/files/BensonHai/UploadImage.rar 本人是用VS2015写的
时间： 2024-10-07 07:56:22