[英]How to upload file using jquery and Web API
我正在嘗試從jQuery和Web API上傳文件。 如果我僅上傳文件,則可以。 如果我再添加一些數據,它將無法正常工作。 下面是代碼; jQuery代碼:
<script type="text/javascript">
$(document).ready(function () {
$("#button1").click(OnUpload);
});
function OnUpload(evt) {
//var files = $("#file1").get(0).files;
var request = {
Name: "test",
Address: "address",
Description: "desc",
City: "city",
files:$("#file1").get(0).files
};
var jsonData = JSON.stringify(request);
if (files.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (i = 0; i < files.length; i++) {
data.append("file" + i, files[i]);
}
$.ajax({
type: "POST",
url: "http://localhost:51801/api/FileUpload/",
contentType: false,
processData: false,
data: jsonData + files,
success: function (results) {
for (i = 0; i < results.length; i++) {
alert(results[i]);
}
}
});
} else {
alert("This browser doesn't support HTML5 multiple file uploads!");
}
}
}
</script>
C#Web API代碼:
public HttpResponseMessage Post(RequestP req)
{
HttpResponseMessage result = null;
var httpRequest = HttpContext.Current.Request;
if (httpRequest.Files.Count > 0)
{
var docfiles = new List<string>();
foreach (string file in httpRequest.Files)
{
var postedFile = httpRequest.Files[file];
var filePath = HttpContext.Current.Server.MapPath("~/" + postedFile.FileName);
postedFile.SaveAs(filePath);
docfiles.Add(filePath);
}
result = Request.CreateResponse(HttpStatusCode.Created, docfiles);
}
else
{
result = Request.CreateResponse(HttpStatusCode.BadRequest);
}
return result;
}
}
public class RequestP
{
public string Name { get; set; }
public string Address { get; set; }
public string Description { get; set; }
public string City { get; set; }
public List<HttpPostedFileBase> files { get; set; }
}
從MVC控制器傳遞HttpPostedFileBase到ApiController也將有所幫助。
我不確定我是否要遲回答,但這也許會幫助其他人解決您的問題。
這對我有用:
HTML文件/ Mvc視圖:
@{
ViewBag.Title = "Home Page";
}
<label for="txtFile">Upload file: </label>
<input type="file" id="txtFile" name="file" />
<br />
<a href="#" id="lnkUploadFile">Upload File</a>
<script>
$(function ()
{
var $txtFile = $('#txtFile'),
files;
var data = new FormData();
$('#lnkUploadFile').click(function ()
{
uploadFile();
});
function uploadFile()
{
if ($txtFile.length)
{
files = $txtFile[0].files;
data.append("UploadedImage", files[0]);
data.append("ImageName", 'MyImage');
}
$.ajax({
type: "POST",
url: "/api/FileUpload/",
contentType: false,
processData: false,
data: data
}).then(function () { });
}
});
</script>
Web Api控制器:
namespace MvcApplication1.Controllers
{
public class FileUploadController : ApiController
{
// POST api/fileupload
public void Post()
{
if (HttpContext.Current.Request.Files.AllKeys.Any())
{
// Get the uploaded image from the Files collection
var httpPostedFile = HttpContext.Current.Request.Files["UploadedImage"];
if (httpPostedFile != null)
{
// Get the complete file path
String fileSavePath = HttpContext.Current.Server.MapPath("~/Content/Images/") + HttpContext.Current.Request.Form["ImageName"].ToString();
// Save the uploaded file to "UploadedFiles" folder
httpPostedFile.SaveAs(fileSavePath);
}
}
}
}
}
希望這可以幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.