Javascript 具有多个不同输入的文件上载进度条（MVC）

我在互联网上搜索了一下，发现这个JavaScript和jQuery模板用于文件上传进度条，它100%正常工作（考虑到您只使用一个表单输入）

我的情况是，我需要将一个文件和4个其他输入（如文本和选择）传递给控制器操作。动作很好。我的问题是通过ajax将所有这些值传递给操作，同时维护进度条功能

动作参数

HTML

---

根据上面的讨论，尝试这种模式可以更好地查看哪些值没有被发送

let f = new FormData();
    f.append('id', getYouFormValue("id"));
    f.append('sel_checkTask', getYouFormValue("sel_checkTask"));
    f.append('cbx_checkTask ', getYouFormValue("cbx_checkTask "));
    if (form.File) {
        f.append('File', getYouFormValue("file"));
    }
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: f
    }

    return fetch(`/Processes/Add_Attachment_to_Process`, requestOptions)
        .then(handleResponse)
        .then(result => {
           //do stuff
        });

function handleResponse(response) {
    return response.text().then(text => {
        const data = text && JSON.parse(text);
        if (!response.ok) {
            if (response.status === 401) {
                console.log('not logged in')
            }
            const error = (data && data.message) || data.title || response.statusText;
            return Promise.reject(error);

        }
        return data;
    });
}

function getYouFormValue(element){
    let val  = document.getElementById(element);
    if(!val){
        console.log('empty value');
        return null;
    }

    return val;

---

}

问题出在哪里？当我使用多个输入时，进度条会工作，但不会调用操作。“formData”的结果是什么？您正在使用.net core吗？不，我没有使用core。请建议如何获取“formData”的结果。请在“var formData=new formData（$（“#myform”）[0]）；”下面添加“console.log（formData）”哇，太棒了，谢谢你。有一个问题：getYouFormValue（）是现有函数还是用户创建的？在我的应用程序中，将对象传递到submit函数中，我调用该函数来代替它，但您正在处理submit事件，因此您必须创建一个函数来从表单中获取表单值。感谢您的帮助。在下一个情况下，我绝对会考虑上面的JavaScript代码。似乎把文件输入重命名为正确的名称解决了问题。@约翰尼斯卡斯滕没有问题，考虑一下投票的答案，如果它是有帮助的。我会接受这个答案，作为解决问题的答案，因为我还没有达到足够高的水平来投票。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<form method="post" enctype="multipart/form-data" action="/Processes/Add_Attachment_to_Process" id="myform">
    <input type="file" id="media" name="file" />


    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" aria-label="Checkbox for following text input" id="cbx_checkTask" name="cbx_checkTask">
                <span id="span_checkTask">Link Task</span>
            </div>
        </div>
        <select class="form-control" id="sel_checkTask" name="sel_checkTask" style="width : 700px;" disabled>
            @foreach (var t in Model.User_Tasks)
            {
                <option value="@t.Task_Discription">@t.Task_Discription - @t.Key_Terms</option>
            }
        </select>
    </div>

    <input id="id" name="id" value="@ViewBag.process_id " />
    <input id="Department_id" name="Department_id" value="@ViewBag.Department_id" />

    <input type="submit" />
</form>

<div class="progress" style="width:40%">
    <div id="uploadprogressbar" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:0%">
        0%
    </div>
</div>

$(document).ready(function () {
        $("#myform").on('submit', function (event) {
            event.preventDefault();

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

            $.ajax({
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener('progress', function (e) {

                        if (e.lengthComputable) {

                            console.log('Bytes Loaded: ' + e.loaded);
                            console.log('Total Size: ' + e.total);
                            console.log('Percentage Uploaded: ' + ((e.loaded / e.total) * 100) + '%');

                            var percent = Math.round((e.loaded / e.total) * 100);

                            $("#uploadprogressbar").html(percent + '%');
                            $("#uploadprogressbar").width(percent + '%');
                        }

                    });
                    return xhr;
                },
                type: 'POST',
                url: '/Processes/Add_Attachment_to_Process',
                data: formData,
                processData: false,
                contentType: false,
                success: function () {
                    alert('File Uploaded');
                },
                error: function (xhr, status, error) {
                    var errorMessage = xhr.status + ': ' + xhr.statusText;
                    alert('Error - ' + errorMessage);
                }
            });
        });
    });

let f = new FormData();
    f.append('id', getYouFormValue("id"));
    f.append('sel_checkTask', getYouFormValue("sel_checkTask"));
    f.append('cbx_checkTask ', getYouFormValue("cbx_checkTask "));
    if (form.File) {
        f.append('File', getYouFormValue("file"));
    }
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: f
    }

    return fetch(`/Processes/Add_Attachment_to_Process`, requestOptions)
        .then(handleResponse)
        .then(result => {
           //do stuff
        });

function handleResponse(response) {
    return response.text().then(text => {
        const data = text && JSON.parse(text);
        if (!response.ok) {
            if (response.status === 401) {
                console.log('not logged in')
            }
            const error = (data && data.message) || data.title || response.statusText;
            return Promise.reject(error);

        }
        return data;
    });
}

function getYouFormValue(element){
    let val  = document.getElementById(element);
    if(!val){
        console.log('empty value');
        return null;
    }

    return val;