經過FormData對象能夠組裝一組用 [XMLHttpRequest]發送請求的鍵/值對,它能夠更靈活方便的發送表單數據。

工做記錄用

1 大概頁面，點擊選擇按鈕，選擇文件，填寫備註並能夠上傳前預覽，而後點擊上傳按鈕開始上傳

 

 

 

2 html+js代碼

<h2>Test</h2>
<div id="fileList"></div>
<span id="file_ct" style="display:none"><input id="file_input" accept="Image/*" type="file" multiple onchange="onFileChange()" /></span>
<a href="#" class="buttom btn-small" onclick="document.getElementById('file_input').click()">選擇圖片</a>
<a href="#" class="buttom btn-small" onclick="Upload()">上傳</a>

<script type="text/javascript">
    var formData;
    function onFileChange() {
        formData = new FormData();//清空FormData中的數據
        $("#fileList").html(''); // 清空列表

        var Upload = document.getElementById("file_input");
        var fileList = Upload.files;
        for (let i = 0; i < fileList.length; i++) {
            var file = fileList[i];
            if ((file.size / 1024 / 1024) > 10) {
                alert("圖片超過10MB，超過限制大小。");
                return;
            }
            $("#fileList").append("<tr><td>" + file.name + " 備註：<input  type='text' name='Remark_After' /><img  style='width:200px;height:200px;' id='Img_After_" + i + "' src='' alt='' /><input type='button' value='上傳預覽' onclick='preview1(" + i + ")'/></td></tr>");
            formData.append("Image_After_" + i, file);
        }
        // 避免第二次點擊無效
        $("#file_input").remove();
        $("#file_ct").append("<input id='file_input' accept='Image/*' type='file' multiple onchange='onFileChange()' />");
    };
    function preview1(i) {
        let reader
        if (formData.get("Image_After_" + i)) {
            reader = new FileReader()
            reader.readAsDataURL(formData.get("Image_After_" + i))
        }
        reader.onload = function (e) {
            document.getElementById('Img_After_' + i).src = e.target.result
        }
    }
    function Upload()
    {
        var request = new XMLHttpRequest();
        request.open('post', '@Url.Content("~/Home/TestUpload")', true);
        request.onload = function (e) {
            console.log(e);
        }
        $("input[name='Remark_After']").each(function (index, e) {
            formData.append("Remark_After_" + index, $(e).val());
        });

        request.send(formData);  //發送請求
        request.onreadystatechange = function () {
            //若響應完成且請求成功
            if (request.readyState === 4 && request.status === 200) {
                alert('操做成功。');
            }
        }
    }
</script>

 

 3  C# 後臺代碼

public void TestUpload()
        {
            string basePath = HttpRuntime.BinDirectory;
            if (!Directory.Exists(Url.Content($"{basePath}/UploadImage")))
            {
                Directory.CreateDirectory(Url.Content($"{basePath}/UploadImage"));
            }
            foreach (string fileName in Request.Files)
            {
                HttpPostedFileBase file = Request.Files[fileName];
                // 生成惟一的文件名稱，避免同名覆蓋
                file.SaveAs(Url.Content($"{basePath}/UploadImage/{Guid.NewGuid().ToString()}.{file.ContentType.Split('/')[1]}"));
            }
        }

完成 ，再見 th

formdata 是真的好用