(前言:这个问题是关于2011年发布的ASP.NET MVC 3.0,而不是关于2019年发布的ASP.NETCore 3.0)
我想用asp.net mvc上传文件。如何使用html输入文件控件上载文件?
(前言:这个问题是关于2011年发布的ASP.NET MVC 3.0,而不是关于2019年发布的ASP.NETCore 3.0)
我想用asp.net mvc上传文件。如何使用html输入文件控件上载文件?
当前回答
使用formdata上载文件
.cshtml文件
var files = $("#file").get(0).files;
if (files.length > 0) {
data.append("filekey", files[0]);}
$.ajax({
url: '@Url.Action("ActionName", "ControllerName")', type: "POST", processData: false,
data: data, dataType: 'json',
contentType: false,
success: function (data) {
var response=data.JsonData;
},
error: function (er) { }
});
服务器端代码
if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
{
var pic = System.Web.HttpContext.Current.Request.Files["filekey"];
HttpPostedFileBase filebase = new HttpPostedFileWrapper(pic);
var fileName = Path.GetFileName(filebase.FileName);
string fileExtension = System.IO.Path.GetExtension(fileName);
if (fileExtension == ".xls" || fileExtension == ".xlsx")
{
string FileName = Guid.NewGuid().GetHashCode().ToString("x");
string dirLocation = Server.MapPath("~/Content/PacketExcel/");
if (!Directory.Exists(dirLocation))
{
Directory.CreateDirectory(dirLocation);
}
string fileLocation = Server.MapPath("~/Content/PacketExcel/") + FileName + fileExtension;
filebase.SaveAs(fileLocation);
}
}
其他回答
通常,您还希望传递一个视图模型,而不仅仅是一个文件。在下面的代码中,您将发现一些其他有用的功能:
检查文件是否已附加检查文件大小是否为0检查文件大小是否大于4 MB检查文件大小是否小于100字节检查文件扩展名
可以通过以下代码完成:
[HttpPost]
public ActionResult Index(MyViewModel viewModel)
{
// if file's content length is zero or no files submitted
if (Request.Files.Count != 1 || Request.Files[0].ContentLength == 0)
{
ModelState.AddModelError("uploadError", "File's length is zero, or no files found");
return View(viewModel);
}
// check the file size (max 4 Mb)
if (Request.Files[0].ContentLength > 1024 * 1024 * 4)
{
ModelState.AddModelError("uploadError", "File size can't exceed 4 MB");
return View(viewModel);
}
// check the file size (min 100 bytes)
if (Request.Files[0].ContentLength < 100)
{
ModelState.AddModelError("uploadError", "File size is too small");
return View(viewModel);
}
// check file extension
string extension = Path.GetExtension(Request.Files[0].FileName).ToLower();
if (extension != ".pdf" && extension != ".doc" && extension != ".docx" && extension != ".rtf" && extension != ".txt")
{
ModelState.AddModelError("uploadError", "Supported file extensions: pdf, doc, docx, rtf, txt");
return View(viewModel);
}
// extract only the filename
var fileName = Path.GetFileName(Request.Files[0].FileName);
// store the file inside ~/App_Data/uploads folder
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
try
{
if (System.IO.File.Exists(path))
System.IO.File.Delete(path);
Request.Files[0].SaveAs(path);
}
catch (Exception)
{
ModelState.AddModelError("uploadError", "Can't save file to disk");
}
if(ModelState.IsValid)
{
// put your logic here
return View("Success");
}
return View(viewModel);
}
确保你有
@Html.ValidationMessage("uploadError")
在您的视图中查看验证错误。
还要记住,默认最大请求长度为4MB(maxRequestLength=4096),要上载更大的文件,必须在web.config中更改此参数:
<system.web>
<httpRuntime maxRequestLength="40960" executionTimeout="1100" />
(此处40960=40 MB)。
执行超时是秒的整数。您可能希望将其更改为允许上传大量文件。
您不使用文件输入控件。ASP.NET MVC中未使用服务器端控件。查看下面的博客文章,其中说明了如何在ASP.NET MVC中实现这一点。
因此,您将首先创建一个HTML表单,其中包含文件输入:
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="file" />
<input type="submit" value="OK" />
}
然后你会有一个控制器来处理上传:
public class HomeController : Controller
{
// This action renders the form
public ActionResult Index()
{
return View();
}
// This action handles the form POST and the upload
[HttpPost]
public ActionResult Index(HttpPostedFileBase file)
{
// Verify that the user selected a file
if (file != null && file.ContentLength > 0)
{
// extract only the filename
var fileName = Path.GetFileName(file.FileName);
// store the file inside ~/App_Data/uploads folder
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
file.SaveAs(path);
}
// redirect back to the index action to show the form once again
return RedirectToAction("Index");
}
}
如果你碰巧像我一样在这里跌跌撞撞,想知道尽管代码正确,为什么你的代码仍然不工作。然后,请在输入控件中查找name属性,您可能会意外错过或从未将其放在首位。
<input class="custom-file-input" name="UploadFile" id="UploadFile" type="file" onchange="ValidateFile(this);" accept=".xls, .xlsx">
我在做文件上传概念时也遇到过同样的错误。我知道开发人员为这个问题提供了很多答案。
尽管我回答这个问题的原因是,由于下面提到的疏忽错误,我犯了这个错误。
<input type="file" name="uploadedFile" />
在指定name属性时,请确保控制器参数也具有相同的名称值“uploadedFile”。这样地:
[HttpPost]
public ActionResult FileUpload(HttpPostedFileBase uploadedFile)
{
}
否则它不会被映射。
检查我的解决方案
public string SaveFile(HttpPostedFileBase uploadfile, string saveInDirectory="/", List<string> acceptedExtention =null)
{
acceptedExtention = acceptedExtention ?? new List<String>() {".png", ".Jpeg"};//optional arguments
var extension = Path.GetExtension(uploadfile.FileName).ToLower();
if (!acceptedExtention.Contains(extension))
{
throw new UserFriendlyException("Unsupported File type");
}
var tempPath = GenerateDocumentPath(uploadfile.FileName, saveInDirectory);
FileHelper.DeleteIfExists(tempPath);
uploadfile.SaveAs(tempPath);
var fileName = Path.GetFileName(tempPath);
return fileName;
}
private string GenerateDocumentPath(string fileName, string saveInDirectory)
{
System.IO.Directory.CreateDirectory(Server.MapPath($"~/{saveInDirectory}"));
return Path.Combine(Server.MapPath($"~/{saveInDirectory}"), Path.GetFileNameWithoutExtension(fileName) +"_"+ DateTime.Now.Ticks + Path.GetExtension(fileName));
}
在基本控制器中添加这些函数,以便可以在所有控制器中使用它们
检查如何使用它
SaveFile(view.PassportPicture,acceptedExtention:new List<String>() { ".png", ".Jpeg"},saveInDirectory: "content/img/PassportPicture");
下面是一个完整的例子
[HttpPost]
public async Task<JsonResult> CreateUserThenGenerateToken(CreateUserViewModel view)
{// CreateUserViewModel contain two properties of type HttpPostedFileBase
string passportPicture = null, profilePicture = null;
if (view.PassportPicture != null)
{
passportPicture = SaveFile(view.PassportPicture,acceptedExtention:new List<String>() { ".png", ".Jpeg"},saveInDirectory: "content/img/PassportPicture");
}
if (view.ProfilePicture != null)
{
profilePicture = SaveFile(yourHttpPostedFileBase, acceptedExtention: new List<String>() { ".png", ".Jpeg" }, saveInDirectory: "content/img/ProfilePicture");
}
var input = view.MapTo<CreateUserInput>();
input.PassportPicture = passportPicture;
input.ProfilePicture = profilePicture;
var getUserOutput = await _userAppService.CreateUserThenGenerateToken(input);
return new AbpJsonResult(getUserOutput);
//return Json(new AjaxResponse() { Result = getUserOutput, Success = true });
}