如何解决处理超过表单jquery asp.net mvc上的输入文件
我有一个表单，用户必须在该表单上输入一些值并附加一个文件。然后是一个将这些数据添加到HTML表的按钮。提交按钮将获取数组中的所有数据，并且还必须上传所有文件。 所以我的问题是，有没有一种方法可以获取所有文件并在ASP.Net MVC中使用C＃上传它们。
这是表格和表格的一些代码：
<div class='wizard-tab' stepname='step3'>
<div class="d-flex justify-content-between align-items-center">
<h6><strong><i class="fas fa-house-user"></i></strong> Structure Details</h6>
<span class="small">#3</span>
</div>
<hr>
<div class="form-group row alert alert-danger" style="display:none" id="tableStructureError"></div>
<div class="form-group row">
<div class="col-sm-3">
<label>GPS</label>
<input type="text" id="structureGPS" class="form-control" placeholder="GPS" />
</div>
<div class="col-md-3">
<label>Structure</label>
<select class="form-control" id="structureCode" data-placeholder="Structure Code"></select>
</div>
<div class="col-md-3">
<label>Roof</label>
<select class="form-control" id="toitCode" data-placeholder="Toiture"></select>
</div>
<div class="col-md-3">
<label>Wall</label>
<select class="form-control" id="murCode" data-placeholder="Mur"></select>
</div>
</div>
<div class="form-group row">
<div class="col-md-3">
<label>Sol</label>
<select class="form-control" id="solCode" data-placeholder="Sol Code"></select>
</div>
<div class="col-md-3">
<label>Usage</label>
<select class="form-control" id="structureUsage"></select>
</div>
<div class="col-md-6 form-row">
Surface/Pieces
<input type="text" class="form-control col-md-8" id="structureSurface" placeholder="Size(mxm)" />
<input type="number" class="form-control col-md-4" id="structurePiece" placeholder="pieces" />
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
<label>Owner</label>
<select class="form-control" id="structureOwner" data-placeholder="Owner Type"></select>
</div>
<div class="col-sm-3">
<label>Photo ID</label>
<input type="text" id="structurePictureID" class="form-control" placeholder="Photo" />
</div>
<div class="col-sm-7">
<label>Structure Photo</label>
<input id="structurePhoto" name="structurePhoto" type="file" class="file" data-show-preview="false" data-theme="fas" data-show-upload="false" data-show-cancel="false" data-allowed-file-extensions='["jpg","jpeg","png"]' data-el-Error-Container="#structurePhoto-errors">
<div id="structurePhoto-errors"></div>
</div>
</div>
<div>
<div class="col-sm-2">
<button class="btn btn-default btn-rounded-f" role="button" type="button" id="addStructure">Add</button>
</div>
</div>
<div class="form-group row col-md-12">
<table class="table table-striped table-hover" id="structureTable">
<thead>
<tr>
<th> GPS</th>
<th style="display:none"> STR</th>
<th> STR</th>
<th style="display:none"> Roof ID</th>
<th> Roof</th>
<th style="display:none"> Photo</th>
<th style="display:none"> Wall</th>
<th> Wall</th>
<th style="display:none"> Soil</th>
<th> Soil</th>
<th style="display:none"> Usage</th>
<th style="display:none"> Usage</th>
<th style="display:none"> Area</th>
<th style="display:none"> Piece</th>
<th style="display:none"> Photo Link</th>
<th style="display:none"> Owner</th>
<th> Owner</th>
<th> </th>
</tr>
</thead>
<tbody id="structureTableBody">
</tbody>
</table>
</div>
</div>
我的jQuery代码是这样的：
//Code that adds data form input files to html array is(Note that everything is working fine):
$('#addStructure').on("click",function (e) {
e.preventDefault();
var errors = [];
if ($("#structureCode").val() == "" || $("#structureCode").val() == null || isNaN($("#structureCode").val()))
errors.push("Structure Code can not be empty");
if ($("#toitCode").val() == "" || $("#toitCode").val() == null || isNaN($("#toitCode").val()))
errors.push("Roof Code can not be empty");
if ($("#murCode").val() == "" || $("#murCode").val() == null || isNaN($("#murCode").val()))
errors.push("Wall Code can not be empty");
if ($("#solCode").val() == "" || $("#solCode").val() == null || isNaN($("#solCode").val()))
errors.push("Floor Code can not be empty");
if ($("#structureOwner").val() == "" || $("#structureOwner").val() == null || isNaN($("#structureOwner").val()) || $("#structureOwner").val() < 1)
errors.push("Please specify Ownership of this structure");
if ($("#structurePictureID").val() == "" || $("#structurePictureID").val() == null)
errors.push("Please specify picture ID of this structure");
if ($("#structurePhoto").val() == "" || $("#structurePhoto").val() == null)
errors.push("Please upload the picture of this structure");
if ($("#structureUsage").val() == "" || $("#structureUsage").val() == null || isNaN($("#structureUsage").val()))
errors.push("Choose the structure Usage");
if ($("#structureSurface").val() == "" || $("#structureSurface").val() == null)
errors.push("Structure surface can't be empty");
if ($("#structurePiece").val() == "" || $("#structurePiece").val() == null || isNaN($("#structurePiece").val()))
errors.push("Specify the number of rooms");
if ($("#structureGPS").val() == "" || $("#structureGPS").val() == null)
errors.push("You didn't add the structure GPS ID");
if (notinTables($("#structureGPS").val()) == true)
errors.push("This GPS ID is already used");
if (notinTables($('#structurePictureID').val()) == true)
errors.push("This picture ID is already used");
if (errors.length > 0) {
var errorMessage = "<ul>";
$.each(errors,function (index,value) {
errorMessage += "<li>" + value + "</li>";
});
errorMessage += "</ul>";
$("#tableStructureError").html(errorMessage).show(250);
}
else {
var tr = "";
tr += '<tr>' +
'<td>' + $('#structureGPS').val() + '</td>' +
'<td style="display:none">' + $('#structureCode').val() + '</td>' +
'<td>' + $('#structureCode option:selected').text() + '</td>' +
'<td style="display:none">' + $('#toitCode').val() + '</td>' +
'<td>' + $('#toitCode option:selected').text() + '</td>' +
'<td style="display:none">' + $('#structurePictureID').val() + '</td>' +
'<td style="display:none">' + $('#murCode').val() + '</td>' +
'<td>' + $('#murCode option:selected').text() + '</td>' +
'<td style="display:none">' + $('#solCode').val() + '</td>' +
'<td>' + $('#solCode option:selected').text() + '</td>' +
'<td style="display:none">' + $('#structureUsage').val() + '</td>' +
'<td style="display:none">' + $('#structureUsage option:selected').text() + '</td>' +
'<td style="display:none">' + $('#structureSurface').val() + '</td>' +
'<td style="display:none">' + $('#structurePiece').val() + '</td>' +
'<td style="display:none">' + $('#structurePhoto').val() + '</td>' +
'<td style="display:none">' + $('#structureOwner').val() +'</td>' +
'<td>' + $('#structureOwner option:selected').text() + '</td>' +
'<td>' + '<a href="#" class="btn btn-danger" id="removeStructure" onclick="removeRow(this);" title="Remove Structure"><i class="fas fa-trash-alt danger"></i></a> ' + '</td>' +
'</tr>';
$("#structureTable tbody").append(tr);
$('#structurePiece,#structureSurface,#structurePictureID,#structureGPS').val('');
$("#structureCode,#toitCode,#murCode,#solCode,#structureOwner,#structureUsage").val("-1");
$('#structurePhoto').fileinput('clear');
$('#structureGPS').focus();
}
return false;
});
//function that convert html table to an array
function convertTabletoArray(tableName) {
var dataArray = [];
$("#"+tableName ).find('tr').each(function (rowIndex,r) {
var cols = [];
$(this).find('td').each(function (colIndex,c) {
cols.push(c.textContent.trim());
});
if (cols.length > 0) {
dataArray.push(cols);
}
});
return dataArray;
}
//calling the function in document ready to display the table content
var structureArray = convertTabletoArray("structureTable");
console.log(structureArray);
如何处理将在Controller中上载的所有文件？如果只是一个文件，我可以使用HTML5的表单数据API在控制器上获取文件。或者，最简单的处理方法是什么。
谢谢
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
