Question

我正在尝试通过ajax将文件上传到我的网络API。我的服务器端代码证明是有效的，因为我已经设法使用调试Fiddler发布文件，它工作正常。但是我没能写出能够进行上传的成功的javascript代码。

以下是我的HTML代码：

function sendImage() {
  var data = new FormData();
  var file = document.getElementById('upload').files[0];

  data.append("image",file);
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp_br=new XMLHttpRequest();
  }
  else {// code for IE6, IE5
    xmlhttp_br=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp_br.onreadystatechange = function () {
    if (xmlhttp_br.readyState == 4 ) {
      var data = xmlhttp_br.responseText;
      alert(xmlhttp_br.status+" "+data);
      var file = JSON.parse(data);
    }
  } 	

  xmlhttp_br.open("POST","http://localhost:59103/"+"api/upload/testUpload",true);
  xmlhttp_br.setRequestHeader("Content-Type","multipart/form-data");
  xmlhttp_br.setRequestHeader("filename", file.name);
  xmlhttp_br.send(data);
}

<input name="UploadedImage" id="upload" type="file"  accept="image/*">
<button onclick="sendImage()"> Upload Image </button>
<img id ="image">

我的c#服务器端代码如下

public async Task<IHttpActionResult> PostFile()
{
  HttpRequestMessage request = this.Request;
  if (!request.Content.IsMimeMultipartContent())
  {
    throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
  }

  var provider = new MultipartMemoryStreamProvider();
  await Request.Content.ReadAsMultipartAsync(provider);
  Stream img = null;
  string filename ="";
  foreach (var file in provider.Contents)
  {
    filename = file.Headers.ContentDisposition.FileName.Trim('\"');
    img = await file.ReadAsStreamAsync();
    //Do whatever you want with filename and its binaray data.
  }

  bool status = UploadFileToS3(filename, img, "edu-media");

  if (status)
  {
    return Ok();
  }
  else
  {
    return StatusCode(HttpStatusCode.ExpectationFailed);
  }
}

请注意，我将文件保存到aws s3 buckets，我不想要jQuery，只需要纯javascript。

使用纯javascript通过ajax

0 个答案: