使用 HTML 和脚本将文件上载到具有 AJAX 的 IIS 服务器

Question

我希望能够上传一个图像文件(。png，。jpg等..)到我的网络服务器(用ASPX运行IIS服务器)，只使用HTML和AJAX。

代码如下：

<form id="personal-details-form" name="detailsfrm" method="POST" action="/ASPX/verifyPersonalDetails" enctype="multipart/form-data" novalidate>
  <label for="profile-pic-input">
    <img id="profile-pic" name="profilepic" class="profile-pic" src="/Media/user.png" onerror="document.profilepic.src = '/Media/user.png'" />
  </label>
  <img id="profile-pic-check" onerror="clearImage();" style="display: none;"/>
  <input id="profile-pic-input" name="pfpinput" type="file" accept="image/png, image/jpeg"
         onchange="readImage(this);" style="display: none" />

<!-- more code that has nothing to do with this question...-->

// JS
function readImage(input) {
    document.getElementById("personal-details-error").innerHTML = "";
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#profile-pic').attr('src', e.target.result);
            $('#profile-pic-check').attr('src', e.target.result);
        };

        reader.readAsDataURL(input.files[0]);
    }
}

function clearImage() {
    document.getElementById("personal-details-error").innerHTML = "Invalid image.";
    document.getElementById("profile-pic-input").value = "";
}

$("#personal-details-form").submit(function (e) {
    e.preventDefault();
    $(".form-field").addClass("used");
    document.getElementById("personal-details-error").innerHTML = ""; // Remove errors
    if (document.getElementById("personal-details-form").checkValidity()) {
        $.ajax({
            type: "POST",
            url: "../ASPX/verifyChangeDetails.aspx",
            data: $("#personal-details-form").serialize(),
            success: function (data) {

            },
        });
    }
});

if (Request.Files["pfpinput"] != null) {
    HttpPostedFile MyFile = Request.Files["pfpinput"];
    Response.Write(MyFile);
} else {
    Response.Write("Nope!");
}

我听说enctype="multipart/form-data"可以工作，但在我的情况下显然不行...

我应该怎么做才能让我的AJAX代码上传图像文件？

Answer 1

原来我需要一个FormData对象，并在其中添加一个文件以及其他东西，因为我使用的是AJAX。

var formData = new FormData(document.detailsfrm);
formData.append("pfpinput", document.detailsfrm.pfpinput.files[0]);