ASP.NET Core 简单文件上传

使用异步 JavaScript 和 XML(AJAX)进行简单的文件上传;用 C# 编写的服务器端代码。

使用AJAX和ASP.NET Core MVC上传文件再简单不过了。这不依赖于jQuery。此代码允许上传多个文件,并与 .NET Core 3.1、.NET 6和.NET 8兼容。

如果想要实现拖放版本,请参阅本文:ASP.NET Core MVC AJAX Drap-n-Drop 文件上传

注意:以下代码示例支持 ASP.NET Core。如果使用 ASP.NET MVC 5,请转到.NET Framework 示例。如果想要从服务器下载文件,请参阅本文

首先,在 Visual Studio 中创建一个名为"Website"的 ASP.NET Core Web 应用程序 (MVC)。

首先是客户端。一半的工作由函数完成buildFormData()。有关的完整实现buildFormData(),请参阅AJAX 库源代码

@{

Layout = null;

}

<html>

<head>

<title></title>

<script type="text/javascript">

function createXMLHttp(){

if(typeof XMLHttpRequest != "undefined"){

return new XMLHttpRequest();

} else if(window.ActiveXObject){

var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];

for(var i = 0; i < aVersions.length; i++){

try{

var oXmlHttp = new ActiveXObject(aVersions[i]);

return oXmlHttp;

}catch(oError){

//void

}

}

}

throw new Error("XMLHttp object could not be created.");

}

//used for posting "multipart/form-data"

function buildFormData(form_object) {

var fd = new FormData();

for (var i = 0; i < form_object.elements.length; i++) {

if (form_object.elements[i].name != null && form_object.elements[i].name != "") {

if (form_object.elements[i].type == "checkbox") {

if (form_object.elements[i].checked) {

fd.append(form_object.elements[i].name, form_object.elements[i].value)

}

}

else if (form_object.elements[i].type == "file") {

for (var j = 0; j < form_object.elements[i].files.length; j++) {

fd.append(form_object.elements[i].name,

form_object.elements[i].files[j],

form_object.elements[i].files[j].name)

}

}

else {

fd.append(form_object.elements[i].name, form_object.elements[i].value)

}

}

}

return fd;

}

function submitForm(oform)

{

if (window.FormData !== undefined) {

document.getElementById("SubmitButton").disabled = true;

var formData = buildFormData(oform);

var xmlobj = createXMLHttp();

xmlobj.onreadystatechange = function () {

if (xmlobj.readyState == 4) {

if (xmlobj.status == 200) {

document.getElementById("divResponse").innerHTML = xmlobj.responseText;

document.getElementById("SubmitButton").disabled = false;

}

else {

throw new Error("Error: " + xmlobj.status + ": " + xmlobj.statusText);

}

}

};

xmlobj.open("post", oform.action, true);

xmlobj.send(formData);

}

else {

alert("This browser does not support posting files with HTML5 and AJAX.");

}

return false;

}

</script>

</head>

<body>

<form enctype="multipart/form-data" οnsubmit="return submitForm(this);" method="post" action="/Ajax/UploadFile">

@Html.AntiForgeryToken()

<input type="text" required name="fullname" placeholder="enter your name here" /><br />

<input type="file" accept="image/jpeg" multiple required name="file1" /><br />

<input type="submit" id="SubmitButton" value="Upload File(s)" />

</form>

<div id="divResponse"></div>

</body>

</html>

如果您喜欢此文章,请收藏、点赞、评论,谢谢,祝您快乐每一天。

相关推荐
爱吃香蕉的阿豪5 小时前
SignalR 全解析:核心原理、适用场景与 Vue + .NET Core 实战
vue.js·microsoft·c#·.netcore·signalr
代码老y21 小时前
ASP.NET Core 高并发万字攻防战:架构设计、性能优化与生产实践
后端·性能优化·asp.net
工藤新一OL1 天前
把xml的格式从utf-8-bom转为utf-8
xml·c#·asp.net·.netcore·visual studio
王柏龙2 天前
Asp.net core mvc中TagHelper的GetChildContentAsync和Content区别
mvc·.netcore
编程乐趣3 天前
基于.Net Core开源的库存订单管理系统
.netcore
步、步、为营4 天前
.NET 8使用牛逼的AOT发布ASP.NET Core应用
ui·asp.net·.net
lgaof65822@gmail.com7 天前
ASP.NET Core Web API 中集成 DeveloperSharp.RabbitMQ
后端·rabbitmq·asp.net·.netcore
爱吃香蕉的阿豪7 天前
在.NET Core API 微服务中使用 gRPC:从通信模式到场景选型
微服务·.netcore·信息与通信·grpc
孤的心了不冷8 天前
【后端】.NET Core API框架搭建(7) --配置使用Redis
数据库·redis·缓存·.netcore