File + C# 多文件上传
/————-/前端主要使用的是vue+sui.taobao.org
使用的时候一些变量定义可以根据自己使用的情况来定义
AJAX——核心XMLHttpRequest对象
FormData
前端html代码：
<label style="position: relative;margin-left:17px;">
<button class="sui-btn btn-primary" name="Examine"><i class="sui-icon icon-tb-check">i>导入文件button>
<input type="file" accept="application/msexcel" class="sui-btn btn-success txt inputat" style="position: absolute; left: 0; width: 100px; opacity: 0;" onchange="DocumentEntity.Control.Upfile(this)" multiple="multiple"/>
label>前端JS代码：
var FileNames=[];
Upfile: function (el) {
if (el.files.length > 0) {// && el.files.length <= 10
for (var fl = 0; fl < el.files.length; fl++) {
if (el.files[fl].size > 5 * 1024 * 1024) {
alert("上传的图片过大,请上传小于5M的照片!");
return;
}
}
//$.showPreloader('上传中...');
//循环上传文件
for (var i = 0; i < el.files.length; i++) {
var file = el.files[i];
//判断文件类型
if (file.type != "image")
//FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
//FileReader接口的方法
//方法名 参数 描述
//readAsBinaryString file 将文件读取为二进制编码
//readAsText file,[encoding] 将文件读取为文本
//readAsDataURL file 将文件读取为DataURL
//abort (none) 终端读取操作
var reader = new FileReader();
reader.readAsDataURL(file);
// 成功读取
reader.onload = function (e) {
//$(".imagelist").append('');//images/loading.gif
}
//XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
var form= new FormData();
form.append("file_" + i, file);
//添加文件名称到数组中
if (FileNames.indexOf(file.name) > 0) {
alert("已经包含文件" + file.name);
} else {
FileNames.push(file.name);
}
}
var fileObj = file; // js 获取文件对象
//$.showPreloader("上传中");
// 接收上传文件的后台地址
// form.append("Index", "1231231231231rewsa");
}
else {
alert("必须大于一张图片");
}
},//分开上传，先展示上传的文件数据，然后在冲过按钮点击上传：
//如果只要选择文件就上传，只需要将下面代码移到上面方法后面即可
//调用方法
Upfile: function () {
//为提交的表单添加其他head头部信息，方便后端取值
form.append("", "");//选择物料数据("key","value")
//请求接口
var UploadUrl = DocumentEntity.Entity.FileAPi;
//提交请求
var xhr = new XMLHttpRequest();
xhr.open("post", UploadUrl, true);
xhr.onload = function (e) {
alert("上传成功");
};
//异步提交form数据
xhr.send(form);
},后端实现：
///
/// 上传文件
///
/// PostFile()
{
var filepath = "";
List Flist = new List();
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
try
{
string root = HttpContext.Current.Server.MapPath("~/UploadFile");
//判断文件夹是否存在
if (!Directory.Exists(root))
{
Directory.CreateDirectory(root);
}
var provider = new MultipartFormDataStreamProvider(root);
await Request.Content.ReadAsMultipartAsync(provider);
foreach (var key in provider.FormData.AllKeys)
{
//读取form.append带过来的其他参数
foreach (var val in provider.FormData.GetValues(key))
{
}
}
//循环文件，进行文件名称的修改组合
foreach (var file in provider.FileData)
{
System.IO.FileInfo fileInfo = new System.IO.FileInfo(file.LocalFileName);
string name = file.Headers.ContentDisposition.FileName.Split('.')[1];
string newfilepath = root + "/";
string newfilename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + new Random().Next(0, 999);
try
{
if (!File.Exists(newfilepath + newfilename))
{
fileInfo.CopyTo(newfilepath + newfilename + "." + name.Substring(0, name.Length - 1));
}
else
{
newfilename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + new Random().Next(0, 999) + Guid.NewGuid().ToString();
fileInfo.CopyTo(newfilepath + newfilename + "." + name.Substring(0, name.Length - 1));
}
}
catch (Exception el)
{
if (!File.Exists(newfilepath + newfilename))
{
fileInfo.CopyTo(newfilepath + newfilename + "." + name.Substring(0, name.Length - 1));
}
else
{
newfilename = DateTime.Now.ToString("yyyyMMddHHmmssfff") + new Random().Next(0, 999) + Guid.NewGuid().ToString();
fileInfo.CopyTo(newfilepath + newfilename + "." + name.Substring(0, name.Length - 1));
}
}
try
{
fileInfo.Delete();
}
catch (Exception exx)
{
}
filepath = "/UploadFile/" + newfilename + "." + name.Substring(0, name.Length - 1);
Flist.Add(filepath);
Thread.Sleep(1000);
}
//返回上传成功的单文件路径
return new HttpResponseMessage()
{
Content = new StringContent(filepath)
};
}
catch (System.Exception e)
{
return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
}
}