Asp.Net WebApi 上傳文件方法 實現功能： 1.原生js調用api上傳 2.jq ajax調用api上傳 後端 Model /// <summary> /// 上傳文件（如果遇到不明白的或者發現BUG請加入QQ群：Java .Net Go PHP UI群：574879752 直接@群主） ...
Asp.Net WebApi 上傳文件方法
實現功能：
1.原生js調用api上傳
2.jq ajax調用api上傳
後端
Model
/// <summary>
/// 上傳文件（如果遇到不明白的或者發現BUG請加入QQ群：Java .Net Go PHP UI群：574879752 直接@群主）
/// </summary>
public class FileResp
{
/// <summary>
/// 文件路徑
/// </summary>
public string FilePath { get; set; }
/// <summary>
/// 上傳錯誤
/// </summary>
public string FileError { get; set; }
}
上傳方法
/// <summary>
/// 上傳文件（如果遇到不明白的或者發現BUG請加入QQ群：Java .Net Go PHP UI群：574879752 直接@群主）
/// </summary>
public class FileUpload
{
/// <summary>
/// 上傳文件
/// </summary>
/// <param name="folderName">文件夾</param>
/// <returns></returns>
public static FileResp UploadFile(string folderName)
{
try
{
FileResp fileResp;
System.Web.HttpRequest request = System.Web.HttpContext.Current.Request;
HttpFileCollection fileCollection = request.Files;
// 判斷是否有文件
if (fileCollection.Count > 0)
{
// 獲取文件
HttpPostedFile httpPostedFile = fileCollection[0];
// 獲取文件擴展名
string fileExtension = Path.GetExtension(httpPostedFile.FileName);
string strHashData = DateTime.Now.ToString("yyyyMMddHHmmssffff");
var Year = DateTime.Now.ToString("yyyy");
var Month = DateTime.Now.ToString("MM");
var Day = DateTime.Now.ToString("dd");
// 設置文件夾名稱
string virtualPathDir = string.Format("/upload/file/{0}/{1}/{2}/{3}/", folderName, Year, Month, Day);
// 設置上傳路徑
string virtualPath = virtualPathDir + strHashData + fileExtension;
var pathDir = AppDomain.CurrentDomain.BaseDirectory + virtualPathDir;
var path = AppDomain.CurrentDomain.BaseDirectory + virtualPath;
// 如果目錄不存在則要先創建
if (!Directory.Exists(pathDir))
{
Directory.CreateDirectory(pathDir);
}
httpPostedFile.SaveAs(path);
fileResp = new FileResp
{
FilePath = virtualPath,
FileError = "OK"
};
}
else
{
fileResp = new FileResp
{
FilePath = string.Empty,
FileError = "請選擇要上傳的文件"
};
}
return fileResp;
}
catch (Exception e)
{
FileResp fileResp = new FileResp
{
FilePath = string.Empty,
FileError = e.Message
};
return fileResp;
}
}
}API端
/// <summary>
/// 上傳文件（如果遇到不明白的或者發現BUG請加入QQ群：Java .Net Go PHP UI群：574879752 直接@群主）
/// </summary>
[RoutePrefix("api/file")]
public class FileUploadController : ApiController
{
/// <summary>
/// 上傳文件
/// </summary>
/// <returns></returns>
[HttpPost, Route("upload")]
public dynamic FileUpload()
{
object obj;
var result = App_Code.FileUpload.UploadFile("test");
if (result.FileError == "OK")
{
obj = new
{
code = 0,
msg = result.FileError,
data = result.FilePath
};
}
else
{
obj = new
{
code = 1,
msg = result.FileError,
data = result.FilePath
};
}
return Json(obj);
}
}前端
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上傳測試</title>
<style>
pre {
outline: 1px solid #ccc;
}
.string {
color: green;
}
.number {
color: darkorange;
}
.boolean {
color: blue;
}
.null {
color: magenta;
}
.key {
color: red;
}
</style>
</head>
<body>
<!--如果遇到不明白的或者發現BUG請加入QQ群：Java .Net Go PHP UI群：574879752 直接@群主-->
<p><input type="file" id="upfile"></p>
<p><input type="button" id="upJS" value="用原生JS上傳"></p>
<p><input type="button" id="upJQuery" value="用jQuery上傳"></p>
<pre id="txt"></pre>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
// 原生JS版
document.getElementById("upJS").onclick = function () { /* FormData 是表單數據類 */
var fd = new FormData();
var ajax = new XMLHttpRequest();
fd.append("upload", 1); /* 把文件添加到表單里 */
fd.append("upfile", document.getElementById("upfile").files[0]);
ajax.open("post", "http://localhost:20861/api/file/upload/", true);
ajax.onload = function () {
document.getElementById("txt").innerHTML = jsonShowFn(ajax.responseText);
console.log(ajax.responseText);
};
ajax.send(fd);
}
// jQuery版
$('#upJQuery').on('click', function () {
var fd = new FormData();
fd.append("upload", 1);
fd.append("upfile", $("#upfile").get(0).files[0]);
$.ajax({
url: "http://localhost:20861/api/file/upload/",
type: "POST",
processData: false,
contentType: false,
data: fd,
success: function (d) {
$("#txt").html(jsonShowFn(JSON.stringify(d)));
console.log(d);
}
});
});
//顯示json
function jsonShowFn(json) {
if (!json.match("^\{(.+:.+,*){1,}\}$")) {
return json //判斷是否是json數據，不是直接返回
}
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
</script>
</body>
</html>
