webapi实现AJAX多文件上传,AJAX调用webapi上传图片或文件

AJAX调用webapi上传图片或文件，并返回刚上传的文件名。废话不多说直接贴代码吧

html相关：html>

Title

function doUpload() {

var formData = new FormData($("#uploadForm")[0]);

$.ajax({

url: '/api/upload',

type: 'post',

data: formData,

async: false,

cache: false,

contentType: false,

processData: false,

success: function (returndata) {

alert(returndata);

},

error: function (returndata) {

alert("报错了");

console.log(returndata);

}

});

}

无刷新测试： 

上传文件： 

webapi相关：public async Task Post()

{

if (!Request.Content.IsMimeMultipartContent())

{

throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

}

string uploadFolderPath = HostingEnvironment.MapPath("~/Upload");

//如果路径不存在，创建路径

if (!Directory.Exists(uploadFolderPath))

Directory.CreateDirectory(uploadFolderPath);

string guid = Guid.NewGuid().ToString().Replace("-","");

List files = new List();

var provider = new WithExtensionMultipartFormDataStreamProvider(uploadFolderPath, guid);

try

{

// Read the form data.

await Request.Content.ReadAsMultipartAsync(provider);

// This illustrates how to get the file names.

foreach (var file in provider.FileData)

{//接收文件

files.Add(Path.GetFileName(file.LocalFileName));

}

}

catch

{

throw;

}

return string.Join(",", files);

}

其中的WithExtensionMultipartFormDataStreamProvider类：public class WithExtensionMultipartFormDataStreamProvider : MultipartFormDataStreamProvider

{

public string guid { get; set; }

public WithExtensionMultipartFormDataStreamProvider(string rootPath, string guidStr)

: base(rootPath)

{

guid = guidStr;

}

public override string GetLocalFileName(System.Net.Http.Headers.HttpContentHeaders headers)

{

string extension = !string.IsNullOrWhiteSpace(headers.ContentDisposition.FileName) ? Path.GetExtension(GetValidFileName(headers.ContentDisposition.FileName)) : "";

return guid + extension;

}

private string GetValidFileName(string filePath)

{

char[] invalids = System.IO.Path.GetInvalidFileNameChars();

return String.Join("_", filePath.Split(invalids, StringSplitOptions.RemoveEmptyEntries)).TrimEnd('.');

}

}

效果如下：

图片与文件被成功上传了：

欢迎加群讨论技术，群号：677373950