下面是一个简单用jquery 上传图片的例子,简单用到 <input type='file' 的html按钮。
网上还有很多jquery 插件,比如:Uploadify ,比如百度的webupload 等等 。
运行界面如下
首先建立一个asp.net mvc 空项目,然后引入jquery.js 文件 。
然后开始写代码
建立一个前后端用于图片上传的消息返回对象(model)
public class ImageUploadResult
{
/// <summary>
/// 上传状态:SUCCESS 或ERROR
/// </summary>
public string state { get; set; }
/// <summary>
/// 图片地址
/// </summary>
public string url { get; set; }
/// <summary>
/// 图片标题(我用guid代替原始标题)
/// </summary>
public string title { get; set; }
/// <summary>
/// 图片原标题
/// </summary>
public string original { get; set; }
/// <summary>
/// 错误内容
/// </summary>
public string error { get; set; }
}
然后编辑controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
namespace NFine.Web.Controllers
{
public class ImageUploadController : Controller
{
[HttpPost]
public ActionResult UploadDrawing()
{
ImageUploadResult uploadRes = new ImageUploadResult();
try
{
if (Request.Files.Count > 0)
{
//该例子只存储第一个图片
HttpPostedFileBase file = Request.Files[0];
if (file.ContentLength > 0)
{
//日志文件夹路径
string LogFileWJJ = AppDomain.CurrentDomain.BaseDirectory + "MyDrawingImage";
if (System.IO.File.Exists(LogFileWJJ) == false)
{
//不存在MyLog文件夹就创建
Directory.CreateDirectory(LogFileWJJ);
}
//当前日期的文件夹路径
string jinTian = LogFileWJJ + "\\" + DateTime.Now.ToString("yyyyMMdd");
if (System.IO.File.Exists(jinTian) == false)
{
Directory.CreateDirectory(jinTian);
}
//图片guid名称
string lastname = Path.GetExtension(file.FileName);
string title = Guid.NewGuid().ToString() + lastname;
//string path = jinTian + "\\" + title;
string path = string.Format("../{0}/{1}/{2}", "MyDrawingImage", DateTime.Now.ToString("yyyyMMdd"), title);
path = System.Web.HttpContext.Current.Server.MapPath(path);
file.SaveAs(path);
uploadRes.state = "SUCCESS";
uploadRes.url = path; //CurrentURL + "/Editor/ShowImage?imagetitle=" + title;
uploadRes.title = title;
uploadRes.original = file.FileName;
uploadRes.error = "";
}
}
}
catch (Exception ex)
{
uploadRes.state = "ERROR";
uploadRes.error = ex.Message;
}
return Json(uploadRes);
}
}
然后编辑view
@*upload test page*@
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Contents/js/jquery/jquery.js"></script>
</head>
<body>
<div id="contentDIV">
<div><p>原始jq按钮</p></div>
<div id="yuanshi">
<input type="file" id="upfile" name="upfile" />
<p>
<input type="text" id="orgName" name="orgName" style="width:200px;" value="原始中文名" />
</p>
<p>
<input type="text" id="succName" name="succName" style="width:900px;" value="服务器文件名称" />
</p>
</div>
</div>
<script type="text/javascript">
$(function () {
//简单上传按钮
$("#upfile").on("change", function () {
var file = this.files[0];
var data = new FormData();
data.append("file", file);
console.log(data);
console.log(file);
$.ajax({
type: "post",
url: "/home/UploadDrawing",
data: data,
contentType: false,
//默认文件类型application/x-www-form-urlencoded 设置之后multipart/form-data
processData: false,
// 默认情况下会对发送的数据转化为对象 不需要转化的信息
success: function (res) {
//source = res.picAddr;
$('#succName').val(res.url);
$('#orgName').val(res.original);
},
});
});
}); //end page ready
</script>
</body>
</html>
这样就可以运行试试了。