正文 

当前位置： 首页 > 知识 >

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

     2023-03-05     15

关键词：

【中文标题】具有多个不同输入的文件上传进度条（MVC）【英文标题】：File Upload Progress Bar with Multiple and Different Inputs(MVC) 【发布时间】：2020-04-30 20:49:48 【问题描述】：

我在互联网上搜索了这个 JavaScript 和 jQuery 模板，用于文件上传进度条，它可以 100% 正常工作（因为您只使用一个表单输入）。

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

动作参数

[HttpPost]
public ActionResult Add_Attachment_to_Process(int id, int Department_id, HttpPostedFileBase Attachment, string sel_checkTask, string cbx_checkTask = null)

HTML

<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>

JavaScript

$(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);
                
            );
        );
    );

【问题讨论】：

有什么问题？ 当我使用多个输入时，进度条工作，但没有调用动作。 “formData”的结果是什么？您使用的是 .net 核心吗？ 不，我没有使用核心。请告知如何获得'formData'的结果。 在'var formData = new FormData($("#myform")[0]);'下面添加'console.log(formData)' 【参考方案1】：

根据上面的讨论，尝试这种模式以更好地查看未发送的值

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;

【讨论】：

哇，太棒了，谢谢。一个问题：getYouFormValue() 是现有函数还是用户创建的？ 在我的应用程序中，将一个对象传递给我调用的提交函数，但您正在处理提交事件，因此您必须创建一个函数来获取表单值你的形式。 感谢您的帮助。在接下来的情况下，我肯定会考虑上面的 JavaScript 代码。似乎将文件输入重命名为正确的名称解决了问题。 @JohannesKarsten 没问题，如果有帮助，请考虑为答案投票 我会接受这个答案作为解决问题的答案，因为我的水平还不够高，无法投票。

如何通过 ASP.NET MVC 上传文件并显示进度条？

】如何通过ASP.NETMVC上传文件并显示进度条？【英文标题】：HowcanIuploadafileviaASP.NETMVCandshowaprogressbar?【发布时间】：2010-11-0122:56:22【问题描述】：我希望允许用户在我的ASP.NETMVC应用程序中浏览文件并将其上传到服务器。如果可能... 查看详情

CodeIgniter 上传进度

...切正常，但是获得这个文件进度并不容易。我查看了大量具有不同解决方案的指南，但它们似乎都不起作用，因为大多数都非常过时（2008年左右）。这就是我要找的东西：PHP/jQuery/AJAX/Javascript解决 查看详情

使用引导进度条以模态显示上传进度

...一个c#MVC应用程序，它显示一个表单并允许用户上传一些文件。当用户点击提交时，会出现一个带有进度条的模式，设置为100%并显示一条消息“请稍候，等等。”我希望能够捕获上传过程的进度并将其显示在模态的进度条中。所... 查看详情

具有多个不同提交按钮的 MVC 剃须刀表单？

】具有多个不同提交按钮的MVC剃须刀表单？【英文标题】：MVCrazorformwithmultipledifferentsubmitbuttons?【发布时间】：2013-11-0803:26:07【问题描述】：Razor视图在一个表单中有3个按钮。所有按钮的操作都需要表单值，这些值基本上是输入... 查看详情

Azure Blob 存储多个同时上传的进度

】AzureBlob存储多个同时上传的进度【英文标题】：Azureblobstoragemultiplesimultaneousuploadswithprogress【发布时间】：2021-03-2421:54:10【问题描述】：我正在尝试将多个文件同时从JavaScript上传到AzureBLOB存储。我不确定它是如何处理并行性的... 查看详情

快速在 UICollectionView 中显示多个图像上传的进度条

】快速在UICollectionView中显示多个图像上传的进度条【英文标题】：ShowingprogressbaronmultipleimageuploadinUICollectionViewinswift【发布时间】：2016-03-1712:12:34【问题描述】：我有一个使用UICollectionView设计的聊天视图。我已经成功实现了图像... 查看详情

前端上传文件实时显示进度条和上传速度的工作原理是怎样的？

参考技术A后端的责任。前端上传文件实时显示进度条和上传速度的工作原理就是后端的责任，在Django中实现需要重载上传文件的函数，在上传时文件是被分成数个MB的chunk处理的，每次都会调用这个上传函数。也就是说，每处理... 查看详情

文件上传和进度条

】文件上传和进度条【英文标题】：Fileuploadandprogessbar【发布时间】：2013-01-2114:01:05【问题描述】：我想在上传文件时根据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib，但... 查看详情

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

文件上传进度条干扰控制器重定向

】文件上传进度条干扰控制器重定向【英文标题】：FileuploadprogressbarinterfereswithControllerredirect【发布时间】：2021-11-1610:23:43【问题描述】：我有一个文件提交表单和一个跟踪上传进度的进度条。但是，控制进度条的javascript会干扰... 查看详情

带进度条的文件上传？

】带进度条的文件上传？【英文标题】：Fileuploaderwithprogressbar?【发布时间】：2011-09-1108:01:12【问题描述】：如何创建带有进度条的HTML/PHP/AJAX文件上传器？我不知道从哪里开始。【问题讨论】：【参考方案1】：我用过Uploadify。易... 查看详情

使用 RestTemplate.postForLocation 的文件上传进度条

】使用RestTemplate.postForLocation的文件上传进度条【英文标题】：FileuploadprogressbarusingRestTemplate.postForLocation【发布时间】：2012-12-0217:15:29【问题描述】：我有一个将文件上传到REST服务的Java桌面客户端应用程序。所有对REST服务的调... 查看详情

vue多文件上传进度条进度不更新问题

...文章 最近在做一个多图片上传的组件，需求是做到多文件依次上传，并显示上传进度条。逻辑部分实现了以后，在更新进度条视图的时候出现一点问题：动态计算生产的进度progress属性不会自动更新。原来 查看详情

文件上传进度条[重复]

】文件上传进度条[重复]【英文标题】：Fileuploadprogressbar[duplicate]【发布时间】：2011-04-0611:20:21【问题描述】：可能重复：UploadProgressBarinPHP任何人都可以建议一种在上传文件时包含文件上传进度条的好方法。我知道这将是javascript... 查看详情

使用 XMLHttpRequest 上传大文件时的进度条

】使用XMLHttpRequest上传大文件时的进度条【英文标题】：ProgressbarwhileuploadinglargefileswithXMLHttpRequest【发布时间】：2013-04-0415:27:08【问题描述】：我正在尝试使用XMLHttpRequest和file.slice将一些大文件上传到服务器。我已经在文档和其... 查看详情

oss上传文件进度条展示

用户上传文件至oss的时候需要增加一个进度条展示，查看了官方文档及网上几篇博客后整理一下相关思路，在此记录一下自己的成长。在此以上传视频为例，自定义监听监听文件上传进度，通过将字节数和总字节数之间比例写入... 查看详情

文件上传：进度条完成百分比

】文件上传：进度条完成百分比【英文标题】：Fileuploads:Percentagecompletedprogressbar【发布时间】：2014-03-0523:30:00【问题描述】：我正在尝试为BuddyPress中的头像上传添加一个“到目前为止完成的百分比”进度条。目的是阻止用户在... 查看详情