（前言：这个问题是关于2011年发布的ASP.NET MVC 3.0，而不是关于2019年发布的ASP.NETCore 3.0）
我想用asp.net mvc上传文件。如何使用html输入文件控件上载文件？
当前回答
尽管我在donnetfiddle上为你做了一个示例项目，但大多数答案似乎都足够合理
我正在使用LumenWorks.Framework进行CSV工作，但这不是必须的。
Demo
View
@using (Html.BeginForm("Index", "Home", "POST"))
{
<div class="form-group">
<label for="file">Upload Files:</label>
<input type="file" multiple name="files" id="files" class="form-control"/><br><br>
<input type="submit" value="Upload Files" class="form-control"/>
</div>
控制器：
[HttpPost]
public ActionResult Index(HttpPostedFileBase upload)
{
if (ModelState.IsValid)
{
if (upload != null && upload.ContentLength > 0)
{
// Validation content length
if (upload.FileName.EndsWith(".csv") || upload.FileName.EndsWith(".CSV"))
{
//extention validation
ViewBag.Result = "Correct File Uploaded";
}
}
}
return View();
}
其他回答
我在做文件上传概念时也遇到过同样的错误。我知道开发人员为这个问题提供了很多答案。
尽管我回答这个问题的原因是，由于下面提到的疏忽错误，我犯了这个错误。
<input type="file" name="uploadedFile" />
在指定name属性时，请确保控制器参数也具有相同的名称值“uploadedFile”。这样地：
[HttpPost]
public ActionResult FileUpload(HttpPostedFileBase uploadedFile)
{
}
否则它不会被映射。
Html：
@using (Html.BeginForm("StoreMyCompany", "MyCompany", FormMethod.Post, new { id = "formMyCompany", enctype = "multipart/form-data" }))
{
<div class="form-group">
@Html.LabelFor(model => model.modelMyCompany.Logo, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-md-6">
<input type="file" name="Logo" id="fileUpload" accept=".png,.jpg,.jpeg,.gif,.tif" />
</div>
</div>
<br />
<div class="form-group">
<div class="col-md-offset-3 col-md-6">
<input type="submit" value="Save" class="btn btn-success" />
</div>
</div>
}
背后代码：
public ActionResult StoreMyCompany([Bind(Exclude = "Logo")]MyCompanyVM model)
{
try
{
byte[] imageData = null;
if (Request.Files.Count > 0)
{
HttpPostedFileBase objFiles = Request.Files["Logo"];
using (var binaryReader = new BinaryReader(objFiles.InputStream))
{
imageData = binaryReader.ReadBytes(objFiles.ContentLength);
}
}
if (imageData != null && imageData.Length > 0)
{
//Your code
}
dbo.SaveChanges();
return RedirectToAction("MyCompany", "Home");
}
catch (Exception ex)
{
Utility.LogError(ex);
}
return View();
}
使用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);
}
}
我必须上传100kb的文件块，最后一个上传文件使用命令存储在数据库中。我希望，这会对你有所帮助。
public HttpResponseMessage Post(AttachmentUploadForm form)
{
var response = new WebApiResultResponse
{
IsSuccess = true,
RedirectRequired = false
};
var tempFilesFolder = Sanelib.Common.SystemSettings.Globals.CreateOrGetCustomPath("Temp\\" + form.FileId);
File.WriteAllText(tempFilesFolder + "\\" + form.ChunkNumber + ".temp", form.ChunkData);
if (form.ChunkNumber < Math.Ceiling((double)form.Size / 102400)) return Content(response);
var folderInfo = new DirectoryInfo(tempFilesFolder);
var totalFiles = folderInfo.GetFiles().Length;
var sb = new StringBuilder();
for (var i = 1; i <= totalFiles; i++)
{
sb.Append(File.ReadAllText(tempFilesFolder + "\\" + i + ".temp"));
}
var base64 = sb.ToString();
base64 = base64.Substring(base64.IndexOf(',') + 1);
var fileBytes = Convert.FromBase64String(base64);
var fileStream = new FileStream(tempFilesFolder + "\\" + form.Name, FileMode.OpenOrCreate, FileAccess.ReadWrite);
fileStream.Seek(fileStream.Length, SeekOrigin.Begin);
fileStream.Write(fileBytes, 0, fileBytes.Length);
fileStream.Close();
Directory.Delete(tempFilesFolder, true);
var md5 = MD5.Create();
var command = Mapper.Map<AttachmentUploadForm, AddAttachment>(form);
command.FileData = fileBytes;
command.FileHashCode = BitConverter.ToString(md5.ComputeHash(fileBytes)).Replace("-", "");
return ExecuteCommand(command);
}
Javascript（Knockout Js）
define(['util', 'ajax'], function (util, ajax) {
"use strict";
var exports = {},
ViewModel, Attachment, FileObject;
//File Upload
FileObject = function (file, parent) {
var self = this;
self.fileId = util.guid();
self.name = ko.observable(file.name);
self.type = ko.observable(file.type);
self.size = ko.observable();
self.fileData = null;
self.fileSize = ko.observable(file.size / 1024 / 1024);
self.chunks = 0;
self.currentChunk = ko.observable();
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (e) {
self.fileData = e.target.result;
self.size(self.fileData.length);
self.chunks = Math.ceil(self.size() / 102400);
self.sendChunk(1);
});
reader.readAsDataURL(file);
self.percentComplete = ko.computed(function () {
return self.currentChunk() * 100 / self.chunks;
}, self);
self.cancel = function (record) {
parent.uploads.remove(record);
};
self.sendChunk = function (number) {
var start = (number - 1) * 102400;
var end = number * 102400;
self.currentChunk(number);
var form = {
fileId: self.fileId,
name: self.name(),
fileType: self.type(),
Size: self.size(),
FileSize: self.fileSize(),
chunkNumber: number,
chunkData: self.fileData.slice(start, end),
entityTypeValue: parent.entityTypeValue,
ReferenceId: parent.detail.id,
ReferenceName: parent.detail.name
};
ajax.post('Attachment', JSON.stringify(form)).done(function (response) {
if (number < self.chunks)
self.sendChunk(number + 1);
if (response.id != null) {
parent.attachments.push(new Attachment(response));
self.cancel(response);
}
});
};
};
Attachment = function (data) {
var self = this;
self.id = ko.observable(data.id);
self.name = ko.observable(data.name);
self.fileType = ko.observable(data.fileType);
self.fileSize = ko.observable(data.fileSize);
self.fileData = ko.observable(data.fileData);
self.typeName = ko.observable(data.typeName);
self.description = ko.observable(data.description).revertable();
self.tags = ko.observable(data.tags).revertable();
self.operationTime = ko.observable(moment(data.createdOn).format('MM-DD-YYYY HH:mm:ss'));
self.description.subscribe(function () {
var form = {
Id: self.id(),
Description: self.description(),
Tags: self.tags()
};
ajax.put('attachment', JSON.stringify(form)).done(function (response) {
self.description.commit();
return;
}).fail(function () {
self.description.revert();
});
});
self.tags.subscribe(function () {
var form = {
Id: self.id(),
Description: self.description(),
Tags: self.tags()
};
ajax.put('attachment', JSON.stringify(form)).done(function (response) {
self.tags.commit();
return;
}).fail(function () {
self.tags.revert();
});
});
};
ViewModel = function (data) {
var self = this;
// for attachment
self.attachments = ko.observableArray([]);
$.each(data.attachments, function (row, val) {
self.attachments.push(new Attachment(val));
});
self.deleteAttachmentRecord = function (record) {
if (!confirm("Are you sure you want to delete this record?")) return;
ajax.del('attachment', record.id(), { async: false }).done(function () {
self.attachments.remove(record);
return;
});
};
exports.exec = function (model) {
console.log(model);
var viewModel = new ViewModel(model);
ko.applyBindings(viewModel, document.getElementById('ShowAuditDiv'));
};
return exports;
});
HTML代码：
<div class="row-fluid spacer-bottom fileDragHolder">
<div class="spacer-bottom"></div>
<div class="legend">
Attachments<div class="pull-right">@Html.AttachmentPicker("AC")</div>
</div>
<div>
<div class="row-fluid spacer-bottom">
<div style="overflow: auto">
<table class="table table-bordered table-hover table-condensed" data-bind="visible: uploads().length > 0 || attachments().length > 0">
<thead>
<tr>
<th class=" btn btn-primary col-md-2" style="text-align: center">
Name
</th>
<th class="btn btn-primary col-md-1" style="text-align: center">Type</th>
<th class="btn btn-primary col-md-1" style="text-align: center">Size (MB)</th>
<th class="btn btn-primary col-md-1" style="text-align: center">Upload Time</th>
<th class="btn btn-primary col-md-1" style="text-align: center">Tags</th>
<th class="btn btn-primary col-md-6" style="text-align: center">Description</th>
<th class="btn btn-primary col-md-1" style="text-align: center">Delete</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: attachments -->
<tr>
<td style="text-align: center" class="col-xs-2"><a href="#" data-bind="text: name,attr:{'href':'/attachment/index?id=' + id()}"></a></td>
<td style="text-align: center" class="col-xs-1"><span data-bind="text: fileType"></span></td>
<td style="text-align: center" class="col-xs-1"><span data-bind="text: fileSize"></span></td>
<td style="text-align: center" class="col-xs-2"><span data-bind="text: operationTime"></span></td>
<td style="text-align: center" class="col-xs-3"><div contenteditable="true" data-bind="editableText: tags"></div></td>
<td style="text-align: center" class="col-xs-4"><div contenteditable="true" data-bind="editableText: description"></div></td>
<td style="text-align: center" class="col-xs-1"><button class="btn btn-primary" data-bind="click:$root.deleteAttachmentRecord"><i class="icon-trash"></i></button></td>
</tr>
<!-- /ko -->
</tbody>
<tfoot data-bind="visible: uploads().length > 0">
<tr>
<th colspan="6">Files upload status</th>
</tr>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size (MB)</th>
<th colspan="2">Status</th>
<th></th>
</tr>
<!-- ko foreach: uploads -->
<tr>
<td><span data-bind="text: name"></span></td>
<td><span data-bind="text: type"></span></td>
<td><span data-bind="text: fileSize"></span></td>
<td colspan="2">
<div class="progress">
<div class="progress-bar" data-bind="style: { width: percentComplete() + '%' }"></div>
</div>
</td>
<td style="text-align: center"><button class="btn btn-primary" data-bind="click:cancel"><i class="icon-trash"></i></button></td>
</tr>
<!-- /ko -->
</tfoot>
</table>
</div>
<div data-bind="visible: attachments().length == 0" class="span12" style="margin-left:0">
<span>No Records found.</span>
</div>
</div>
MemoryStream.GetBuffer() can return extra empty bytes at the end of the byte[], but you can fix that by using MemoryStream.ToArray() instead. However, I found this alternative to work perfectly for all file types:
using (var binaryReader = new BinaryReader(file.InputStream))
{
byte[] array = binaryReader.ReadBytes(file.ContentLength);
}
Here's my full code:
Document Class:
public class Document
{
public int? DocumentID { get; set; }
public string FileName { get; set; }
public byte[] Data { get; set; }
public string ContentType { get; set; }
public int? ContentLength { get; set; }
public Document()
{
DocumentID = 0;
FileName = "New File";
Data = new byte[] { };
ContentType = "";
ContentLength = 0;
}
}
File Download:
[HttpGet]
public ActionResult GetDocument(int? documentID)
{
// Get document from database
var doc = dataLayer.GetDocument(documentID);
// Convert to ContentDisposition
var cd = new System.Net.Mime.ContentDisposition
{
FileName = doc.FileName,
// Prompt the user for downloading; set to true if you want
// the browser to try to show the file 'inline' (display in-browser
// without prompting to download file). Set to false if you
// want to always prompt them to download the file.
Inline = true,
};
Response.AppendHeader("Content-Disposition", cd.ToString());
// View document
return File(doc.Data, doc.ContentType);
}
File Upload:
[HttpPost]
public ActionResult GetDocument(HttpPostedFileBase file)
{
// Verify that the user selected a file
if (file != null && file.ContentLength > 0)
{
// Get file info
var fileName = Path.GetFileName(file.FileName);
var contentLength = file.ContentLength;
var contentType = file.ContentType;
// Get file data
byte[] data = new byte[] { };
using (var binaryReader = new BinaryReader(file.InputStream))
{
data = binaryReader.ReadBytes(file.ContentLength);
}
// Save to database
Document doc = new Document()
{
FileName = fileName,
Data = data,
ContentType = contentType,
ContentLength = contentLength,
};
dataLayer.SaveDocument(doc);
// Show success ...
return RedirectToAction("Index");
}
else
{
// Show error ...
return View("Foo");
}
}
View (snippet):
@using (Html.BeginForm("GetDocument", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="file" />
<input type="submit" value="Upload File" />
}
推荐文章
- 实体框架核心:在上一个操作完成之前，在此上下文中开始的第二个操作
- 如何为构造函数定制Visual Studio的私有字段生成快捷方式?
- ASP中基于角色的访问控制(RBAC)与基于声明的访问控制(CBAC)NET MVC
- 如何使用JSON确保字符串是有效的JSON。网
- AppSettings从.config文件中获取值
- 通过HttpClient向REST API发布一个空体
- 如何检查IEnumerable是否为空或空?
- 自动化invokerrequired代码模式
- 在c#代码中设置WPF文本框的背景颜色
- 在c#中，什么是单子?
- 带有空模型的Renderpartial传递了错误的类型
- c#和Java中的泛型有什么不同?和模板在c++ ?
- c#线程安全快速(est)计数器
- MVC4数据类型。日期编辑器不会在Chrome中显示日期值，在Internet Explorer中没问题
- 如何将此foreach代码转换为Parallel.ForEach?
