原理:使用表单的input type="file"标签,通过ajax提交表单请求,后台获取请求中的文件信息,进行文件保存操作
由于我测试用的做了一个上传文件和上传图片方法,所以我有两个请求方法
1、html页面
1)图片上传页面
@{
ViewBag.Title = "Images";
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传文件测试</title>
</head>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/com.Upload.js"></script>
<script>
var uploadClick = function () {
//1、调用上传附件方法
var dts = coms.doUploadImage();
//将返回格式解析成json对象
var result = JSON.parse(dts);
//2、调用保存附件信息方法 //3、输出提示信息
if (result.Success) {
//获取文件相关信息(文件名、文件大小、文件路径等)
var array = result.Data;
//根据返回文件信息和页面数据,组成ajax请求,保存文件信息到数据库中
alert("图片上传成功"+ array.length +"个"); } else {
alert("图片上传失败!");
}
} </script> <style type="text/css">
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
</style> <body>
<div id="master">
<form id="uploadForm">
<div style="margin: 20px 0px -20px 20px;width:250px;">
<div style="width:30%;margin-top:15px;">图片上传:</div>
<div style="width:60%;margin-top:15px;">
<input id="doc" type="file" name="Picture" multiple="multiple" onchange="javascript:coms.setImagePreviews()" accept="image/*" />
</div>
</div>
<div class="clear"></div> <!-- 存放预览图片的区域 -->
<div id="dd" style="margin-left: 5%;width:auto;margin-top:50px;"></div>
<div class="clear"></div> <div style="position: absolute;width: 100%;margin-top: 10px;font-weight: bolder;">
<a href="javascript:uploadClick()" >上传</a>
</div>
</form>
</div>
</body>
</html>
2)上传文件页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传文件测试</title>
</head>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/com.Upload.js"></script>
<script>
var uploadClick = function () {
//1、调用上传附件方法
var dts = coms.doUploadFile();
//将返回格式解析成json对象
var result = JSON.parse(dts);
//2、调用保存附件信息方法 //3、输出提示信息
if (result.Success) {
//获取文件相关信息(文件名、文件大小、文件路径等)
var array = result.Data;
//根据返回文件信息和页面数据,组成ajax请求,保存文件信息到数据库中
alert("文件上传成功"+ array.length +"个"); } else {
alert("文件上传失败!");
}
} </script> <style type="text/css">
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
</style> <body>
<div id="master">
<form id="uploadForm">
<div style="margin: 20px 0px -20px 20px;width:250px;">
<div style="width:30%;margin-top:15px;">文件上传:</div>
<div style="width:60%;margin-top:15px;">
<input id="doc" type="file" name="files" multiple="multiple" />
</div>
</div>
<div class="clear"></div> <div style="position: absolute;width: 100%;margin-top: 25px;font-weight: bolder;">
<a href="javascript:uploadClick()">上传</a>
</div>
</form>
</div>
</body>
</html>
2、com.Upload.js文件内容(自定义)
var coms = {}; //执行图片上传方法(保存)
coms.doUploadImage = function () {
var result;
var formData = new FormData($("#uploadForm")[0]);
console.log(formData);
if (formData == null || formData == undefined) {
alert("未找到上传图片信息");
return;
}
$.ajax({
type: "POST",
url: '/FileUpload/MultiUploadImage',
data: formData,
async: false,
contentType: false,
processData: false,
success: function (dts) {
result = dts;
}, error: function (res) {
alert(res.responseText);
}
});
return result;
} //执行上传附件方法(保存)
coms.doUploadFile = function () {
var result;
var formData = new FormData($("#uploadForm")[0]);
console.log(formData);
if (formData == null || formData == undefined) {
alert("未找到上传文件信息");
return;
}
$.ajax({
type: "POST",
url: '/FileUpload/MultiUploadFile',
data: formData,
async: false,
contentType: false,
processData: false,
success: function (dts) {
result = dts;
}, error: function (res) {
alert(res.responseText);
}
});
return result;
} //多图片上传预览方法
coms.setImagePreviews = function (avalue) {
//获取选择图片的对象
var docObj = document.getElementById("doc");
//后期显示图片区域的对象
var dd = document.getElementById("dd");
dd.innerHTML = "";
//得到所有的图片文件
var fileList = docObj.files;
//循环遍历
for (var i = 0; i < fileList.length; i++) {
//动态添加html元素
dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
//获取图片imgi的对象
var imgObjPreview = document.getElementById("img" + i); if (docObj.files && docObj.files[i]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '100px';
imgObjPreview.style.height = '90px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取,需要以下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径
}
else {
//IE下,使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
//alert(imgSrc)
var localImagId = document.getElementById("img" + i);
//必须设置初始大小
localImagId.style.width = "100px";
localImagId.style.height = "90px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch (e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
}
return true;
}
3、控制器页面
public class HomeController : Controller
{ /// <summary>
/// 访问上传图片页面
/// </summary>
/// <returns></returns>
public ActionResult Images()
{
return View();
} /// <summary>
/// 访问上传文件页面
/// </summary>
/// <returns></returns>
public ActionResult Files()
{
return View();
}
}
4、服务器上传方法
1)FileUploadController 内容:
public class FileUploadController : Controller
{
#region 多文件上传保存 FileUploadService myService = new FileUploadService(); /// <summary>
/// 上传多个图片
/// </summary>
[HttpPost]
public string MultiUploadImage()
{
JsonReturn result = new JsonReturn();
bool flag = false;
string msg = string.Empty;
string itemMsg = string.Empty;
JArray array = new JArray(); int count = ;
try
{
//获取所有客户端的表单数据的文件
var files = System.Web.HttpContext.Current.Request.Files;
if (files.Count > )
{
//循环所有文件信息
for (var i = ; i < files.Count; i++)
{
var file = files[i];
//物理上保存文件信息
JObject myFiles = myService.UploadImage(file, ref itemMsg);
//如果是空对象时,证明未保存成功
if (myFiles == null)
{
//返回失败状态
flag = false;
msg = itemMsg;
break;
}
else
{
//追加到数组中
array.Add(myFiles);
count++;
//返回成功状态
flag = true;
msg = "上传成功";
}
}
}
//返回成功或失败信息
result.Success = flag;
result.Message = msg;
result.Count = count;
result.Data = array;
}
catch (Exception ex)
{
flag = false;
msg = ex.Message; //返回失败结果信息
result.Success = flag;
result.Message = msg;
result.Count = count;
}
//记得序列化出去
return JsonConvert.SerializeObject(result);
} /// <summary>
/// 上传多个文件
/// </summary>
[HttpPost]
public string MultiUploadFile(string id)
{
JsonReturn result = new JsonReturn();
bool flag = false;
string msg = string.Empty;
string itemMsg = string.Empty;
JArray array = new JArray(); int count = ;
try
{
//获取所有客户端的表单数据的文件
var files = System.Web.HttpContext.Current.Request.Files;
if (files.Count > )
{
//循环所有文件信息
for (var i = ; i < files.Count; i++)
{
var file = files[i];
//物理上保存文件信息
JObject myFiles = myService.UploadFile(file, ref itemMsg);
//如果是空对象时,证明未保存成功
if (myFiles == null)
{
//返回失败状态
flag = false;
msg = itemMsg;
break;
}
else
{
//追加到数组中
array.Add(myFiles);
count++;
//返回成功状态
flag = true;
msg = "上传成功";
}
}
}
//返回成功或失败信息
result.Success = flag;
result.Message = msg;
result.Count = count;
result.Data = array;
}
catch (Exception ex)
{
flag = false;
msg = ex.Message; //返回失败结果信息
result.Success = flag;
result.Message = msg;
result.Count = count;
}
//记得序列化出去
return JsonConvert.SerializeObject(result);
} /// <summary>
/// 定义返回格式
/// </summary>
public class JsonReturn
{
public JsonReturn() { }
public JsonReturn(bool bo, string msg)
{
_Success = bo;
Message = msg;
}
public JsonReturn(bool bo, string msg, int count)
{
_Success = bo;
Message = msg;
Count = count;
} private bool _Success = false;
/// <summary>
/// 调用是否成功
/// </summary>
public bool Success
{
get { return _Success; }
set { _Success = value; }
}
/// <summary>
/// 返回的信息
/// </summary>
public string Message { get; set; } /// <summary>
/// 返回数量
/// </summary>
public int Count { get; set; } /// <summary>
/// 返回数据
/// </summary>
public object Data { get; set; }
} #endregion
}
2、FileUploadService的内容
public class FileUploadService
{
#region 文件上传的方法 /// <summary>
/// 上传单个图片
/// </summary>
public dynamic UploadImage(HttpPostedFile file, ref string msg)
{
JObject obj = new JObject();
try
{
string newFileName = string.Empty;
string newFilePath = string.Empty;
string newFileSize = string.Empty; //1、检查上传的文件路径是否存在
//获取当前程序集的文件路径
string applicationPath = System.AppDomain.CurrentDomain.BaseDirectory.ToString();
//获取程序集路径+文件夹路径
string toServerPath = applicationPath + "\\" + ConfigurationManager.AppSettings["UploadImage"];
//拼接上年月文件夹( C:\\UploadFiles\\201904 )
toServerPath = toServerPath + "\\" + DateTime.Now.ToString("yyyyMM");
//判断服务器文件夹路径是否存在
if (!Directory.Exists(toServerPath))
{
//不存在路径,则创建
Directory.CreateDirectory(toServerPath);
} //2、检查文件的格式
//指定上传文件格式类型
string[] fileExts = { ".jpg", ".jpeg", ".gif", ".png", ".bmp", ".ico" };
//获取上传文件的后缀名
string fileExt = Path.GetExtension(file.FileName).ToLower(); //只上传包含的文件类型
if (fileExts.Contains(fileExt))
{
//获取新文件名(包含后缀名)
newFileName = Guid.NewGuid().ToString() + fileExt; //file.FileName;
//拼接最终的保存文件路径(C:\UploadFiles\201904\01.jpg)
newFilePath = toServerPath + "\\" + newFileName; //检查保存是否已存在,存在不做保存
if (!System.IO.File.Exists(newFilePath))
{
//3、保存上传的文件
file.SaveAs(newFilePath);
}
//计算文件的大小(转成字符)
newFileSize = GetFileSize(newFilePath); // file.ContentLength; 获取文件的字节
//获取相对路径
string relatePath = newFilePath.Substring(applicationPath.Length, newFilePath.Length - applicationPath.Length); //返回文件相关信息
obj.Add("Old_FileName", file.FileName);
obj.Add("FileName", newFileName);
obj.Add("FilePath", newFilePath); //文件全路径
obj.Add("FileDirect", relatePath); //相对路径
obj.Add("FileSize", newFileSize);
obj.Add("FileExt", fileExt);
}
else
{
msg = "上传失败,请选择扩展名为:JPG,JPEG,GIF,PNG,BMP等类型图片!";
obj = null;
}
}
catch (Exception ex)
{
msg = ex.Message;
obj = null;
}
return obj;
} /// <summary>
/// 上传单个文件
/// </summary>
public dynamic UploadFile(HttpPostedFile file, ref string msg)
{
JObject obj = new JObject();
try
{
string newFileName = string.Empty;
string newFilePath = string.Empty;
string newFileSize = string.Empty; //1、检查上传的文件路径是否存在
//获取当前程序集的文件路径
string applicationPath = System.AppDomain.CurrentDomain.BaseDirectory.ToString();
//获取程序集路径+文件夹路径
string toServerPath = applicationPath + "\\" + ConfigurationManager.AppSettings["UploadFile"];
//拼接年月文件夹
toServerPath = toServerPath + "\\" + DateTime.Now.ToString("yyyyMM");
//判断服务器文件夹路径是否存在
if (!Directory.Exists(toServerPath))
{
//不存在路径,则创建
Directory.CreateDirectory(toServerPath);
} //2、检查文件大小是否超过
int filebyte = file.ContentLength; //单位kb(字节)
string conSize = ConfigurationManager.AppSettings["UploadFileSize"];
int conbyte = Convert.ToInt32(conSize) * * ;
if (filebyte > conbyte)
{
msg = string.Format("上传失败,上传文件超过最大限制{0}MB!", conSize);
obj = null;
}
else
{
//3、保存上传的文件
//上传文件筛选掉图片格式
string[] fileExts = { ".jpg", ".jpeg", ".gif", ".png", ".bmp", ".ico" };
//获取上传文件的后缀名
string fileExt = Path.GetExtension(file.FileName).ToLower();
if (fileExts.Contains(fileExt))
{
msg = "上传失败,上传附件不包含图片格式!";
obj = null;
}
else
{
//获取新文件名(包含后缀名)
newFileName = Guid.NewGuid().ToString() + fileExt; //file.FileName;
//拼接最终的保存文件路径(C:\UploadFiles\201904\01.jpg)
newFilePath = toServerPath + "\\" + newFileName;
//检查保存是否已存在,存在不做保存
if (!System.IO.File.Exists(newFilePath))
{
//3、保存上传的文件
file.SaveAs(newFilePath);
}
//计算文件的大小(转成字符)
newFileSize = GetFileSize(newFilePath);
//获取相对路径
string relatePath = newFilePath.Substring(applicationPath.Length, newFilePath.Length - applicationPath.Length); //4、返回文件相关信息
obj.Add("Old_FileName", file.FileName);
obj.Add("FileName", newFileName);
obj.Add("FilePath", newFilePath); //文件全路径
obj.Add("FileDirect", relatePath); //相对路径
obj.Add("FileSize", newFileSize);
obj.Add("FileExt", fileExt);
}
}
}
catch (Exception ex)
{
msg = ex.Message;
obj = null;
}
return obj;
} /// <summary>
/// 获取文件的大小
/// </summary>
/// <param name="sFileFullName"></param>
/// <returns></returns>
public string GetFileSize(string sFileFullName)
{
FileInfo fiInput = new FileInfo(sFileFullName);
double len = fiInput.Length; string[] sizes = { "B", "KB", "MB", "GB" };
int order = ;
while (len >= && order + < sizes.Length)
{
order++;
len = len / ;
}
string filesize = String.Format("{0:0.##} {1}", len, sizes[order]);
return filesize;
} #endregion
}
5、webconfig配置
1)在<appSettings>下添加如下配置
<!--保存上传图片文件夹 -->
<add key="UploadImage" value="UploadImages"/>
<!--保存上传附件文件夹 -->
<add key="UploadFile" value="UploadFiles"/>
<!--保存上传附件最大大小,单位MB-->
<add key="UploadFileSize" value="4"/>
配置文件和图片保存的文件夹名称,及上传文件时的最大上传
2)在<system.web>下添加如下配置
<!--最大请求长度,单位为KB(千字节),默认为4M,设置为1G,上限为2G -->
<httpRuntime maxRequestLength="1048576" executionTimeout="3600" targetFramework="4.5" />
3)在<system.webServer>下添加如下配置
<!--允许上传文件长度,单位字节(B),默认为30M,设置为1G,最大为2G -->
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="1073741824"/>
</requestFiltering>
</security>
解决程序默认上传最大4M的配置
6、上传效果图
1)存放文件路径(运行项目下的文件)
2)图片预览效果
3)上传图片效果
7、web上传文件Demo下载
链接:https://pan.baidu.com/s/1QKpleoVdJ6sAhLIeNJSUZg
提取码:avcc