javascript - 具有多个不同输入的文件上传进度条(MVC)
问题描述
我在互联网上搜索,发现这个 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);
}
});
});
});
解决方案
根据上面的讨论,尝试这种模式以更好地查看未发送的值
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;
}
推荐阅读
- javascript - 选择某个选项时,如何将值传递给隐藏的表单字段?
- flutter - 颤振:如何从对象列表中填充下拉框
- python - Tabula 未正确排序提取的表
- javascript - 我有不会添加的数字(我必须保留为字符串)。他们只是连接数字
- git - 新签出时 cygwin 文件上的 git 已更改
- regex - 第 N 个非空白正则表达式匹配
- c# - C#如何从包含具有不同编码的多个文件的文件夹中读取文本
- java - 当我向它添加 actionListener 时,为什么我的按钮会从边框布局中消失?
- sql - SQL Server - 连接前 5 行
- javascript - 检查平板电脑是否与设备的操作系统无关