1、下载jQuery.Form 包
官网下载：http://jquery.malsup.com/form/#download
2、模拟代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>上传图片测试</title>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.form.js"></script> <script type="text/javascript">
function UpdateUserInfo() {
var Id = $("input[name='Id']").val();
var NickName = $("input[name='NickName']").val();
var RealName = $("input[name='RealName']").val();
$("#formDemo").ajaxSubmit({
url: '/Test/Submit?Id='+Id+'&RealName='+RealName+'&NickName='+NickName, /*设置post提交到的页面*/
type: "post", /*设置表单以post方法提交*/
headers:
{
AuthCode: "123456789"
},
dataType: "json", /*设置返回值类型为文本*/
success: function (data) {
//alert(data);
var txt = "<p>Id:"+data.Id+"</p><p>RealName:"+data.RealName+"</p><p>NickName:"+data.NickName+"</p><p><img src='"+data.HeadUrl+"' /></p>";
$("#txt").empty().append($(txt));
},
error: function (error) {
alert(error);
console.info(error);
} });
} function submitForm() {
UpdateUserInfo();
}
</script> </head>
<body>
<h1>上传图片测试</h1>
<form id="formDemo" method="post" enctype="multipart/form-data">
<input type="hidden" name="Id" value="69A26DD9-4A83-47DC-B0A1-172224037C95" /> <br /><br />
RealName: <input type="text" name="RealName" value="RealName" /><br /><br />
NickName: <input type="text" name="NickName" value="NickName" /><br /><br />
头像：<input type="file" name="HeadUrl" /> <br /><br />
<input type="button" value="测试" onclick="submitForm()" /> </form>
<div id="txt"> </div>
</body>
</html>
3、action 代码：
/// <summary>
/// 上传文件 修改上传文件名称 也不包含后缀名
/// </summary>
/// <returns></returns>
[HttpPost, Route("Submit")]
public async Task<JsonResult<UserModel>> Submit(string Id,string RealName,string NickName)
{
try
{
string headUrl = string.Empty;
//web api 获取项目根目录下指定的文件下
var root = System.Web.Hosting.HostingEnvironment.MapPath("/Resource/Images");
//对上传文件重新命名 根据需求对应修改文件名称 不包含后缀名 只是前缀名
var provider = new RenamingMultipartFormDataStreamProvider(root); //文件已经上传 但是文件没有后缀名 需要给文件添加后缀名
await Request.Content.ReadAsMultipartAsync(provider); foreach (var file in provider.FileData)
{
//这里获取含有双引号'" '
string filename = file.Headers.ContentDisposition.FileName.Trim('"');
//获取对应文件后缀名
string fileExt = filename.Substring(filename.LastIndexOf('.')); FileInfo fileinfo = new FileInfo(file.LocalFileName);
//fileinfo.Name 上传后的文件路径 此处不含后缀名
//修改文件名 添加后缀名
string newFilename = fileinfo.Name + fileExt;
//最后保存文件路径
string saveUrl = Path.Combine(root, newFilename);
fileinfo.MoveTo(saveUrl); headUrl = "/Resource/Images/" + newFilename;
}
UserModel model = new UserModel()
{
Id = Id,
NickName = NickName,
RealName = RealName,
HeadUrl = headUrl
}; return Json<UserModel>(model);
}
catch (Exception ex)
{
throw ex;
}
}