如何在單個發布請求中傳遞多個文件和一個json對象

Question

我奮斗了兩天，但發現的解決方案還不夠。 這是場景：

我有.NET MVC項目，在當前視圖中，用戶可以通過單擊“添加新行”來添加多行。 每行包含4個輸入type =“ text”和1個輸入type =“ file”。 它工作正常。

當我將此表格發布到我的MVC控制器時，發生了問題。 我在我的MVC控制器上接收所有數據，但每行上載的文件除外。 這就是我的做法。

視圖：

 <div class="row pt-20"> <div class="col-md-2"> <div class="form-group"> <label class="control-label">Transaction Date</label> <input type="text" name="TransactionDate1" id="mdate1" class="form-control tdate01" value="" required /> </div> </div> <div class="col-md-2"> <div class="form-group"> <label class="control-label">Description</label> <textarea name="Description1" id="Description1" class="form-control descr01" cols="2" rows="2"></textarea> </div> </div> <div class="col-md-1"> <div class="form-group"> <label class="control-label">Amount</label> <input type="text" name="Amount1" id="Amount1" class="form-control amt01" required /> </div> </div> <div class="col-md-1"> <div class="form-group"> <label class="control-label">Invoice #</label> <input type="text" name="InvoiceNo1" id="InvoiceNo1" class="form-control inv01" required /> </div> </div> <div class="col-md-2"> <div class="form-group"> <label class="control-label">Comments</label> <textarea name="Comments1" id="Comments1" class="form-control comm01" cols="1" rows="2"></textarea> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Upload Invoice</label> <input type="file" name="postedFile1" id="postedFile1" class="form-control file01" required /> <input type="hidden" name="hiddenfile1" id="hiddenfile1" value=""/> </div> </div> <div class="col-md-2"> <div class="form-group"> <br /> <input type="button" id="btnAdd" value="+ Row" class="btn btn-dark" /> </div> </div> </div> <div class="form-actions mt-40"> **<button type="button" id="btnSubmit" class="btn btn-success"> <i class="fa fa-check"></i> Save</button>** </div> 

jQuery代碼

 var rowCount; var transactionDetailVM = []; var ClaimTransactionVM = {}; var reimFiles = []; var fileString = ''; var reader; $(document).ready(function () { debugger; rowCount = 1; $(document).on("click", "#btnAdd", function () { // // var rowCount = $('.data-contact-person').length + 1; //Generating base64 string for previously uploaded file. //var filelogoUpload = $('#postedFile' + rowCount).get(0); //var files = filelogoUpload.files; //var file = files[0]; getBase64(file, rowCount); rowCount++; //Validations will run before adding a new row. var rowdiv = '<div class="row pt-20">' + '<div class="col-md-2"> ' + ' <div class="form-group"> ' + ' <label class="control-label">Transaction Date</label>' + ' <input type="text" name="TransactionDate' + rowCount + '" id="mdate' + rowCount +'" class="form-control tdate01" value="" required />' + ' </div>' + ' </div>' + '<div class="col-md-2" >' + ' <div class="form-group">' + ' <label class="control-label">Description</label>' + '<textarea name="Description' + rowCount +'" id="Description' + rowCount +'" class="form-control descr01" cols="2" rows="2"></textarea>' + '</div>' + '</div>' + '<div class="col-md-1">' + '<div class="form-group">' + '<label class="control-label">Amount</label>' + ' <input type="text" name="Amount' + rowCount + '" id="Amount' + rowCount +'" class="form-control amt01" />' + '</div>' + '</div>' + '<div class="col-md-1" >' + '<div class="form-group">' + '<label class="control-label">Invoice #</label>' + '<input type="text" name="InvoiceNo' + rowCount + '" id="InvoiceNo' + rowCount +'" class="form-control inv01" />' + '</div>' + '</div>' + '<div class="col-md-2" >' + '<div class="form-group">' + '<label class="control-label">Comments</label>' + '<textarea name="Comments' + rowCount +'" id="Comments' + rowCount +'" class="form-control comm01" cols="1" rows="2"></textarea>' + ' </div></div>' + '<div class="col-md-2">' + '<div class="form-group">' + ' <label>Upload Invoice</label>' + '<input type="file" name="postedFile' + rowCount + '" id="postedFile' + rowCount + '" class="form-control file01" />' //+ '<input type="hidden" name="hiddenfile' + rowCount + '" id="hiddenfile' + rowCount+'"/>' + '</div>' + '</div>' + '<div class="col-md-2">' +'<div class="form-group">' + '<input type="button" id="btnAdd" value="+ Row" class="btn btn-dark" />' + '<input type = "button" id ="btnRemove" value="- Row" class="btn btn-danger" />' +'</div>' +'</div>' +'</div>'; $('#newClaimForm').append(rowdiv); debugger; //$("input[name*='TransactionDate']").css("background-color", "yellow"); // Adding these controls to Main table class }); }); $(document).on("click", "#btnRemove", function () { $(this).closest("div[class='row pt-20']").remove(); }); function getAllData() { console.log('getalldata called'); var claimTitle = $('#TransactionName').val(); var claimType = $('#ClaimTypes').val(); //Transaction Details for (var i = 1; i <= rowCount; i++) { //file operation var filelogoUpload = $('#postedFile' + i).get(0); var files = filelogoUpload.files; var file = files[0]; //getBase64(file); //reader = new FileReader(); //reader.onload = function () { // //console.log(reader.result); // fileString = reader.result; //}; //reader.readAsDataURL(file); //end file operation var trandate = $('#mdate' + i).val(); var descr = $('#Description' + i).val(); var amt = $('#Amount' + i).val(); var invno = $('#InvoiceNo'+i).val(); var comm = $('#Comments' + i).val(); //var baseFileString = $('#hiddenFile' + i).val(); debugger; console.log(trandate); console.log(descr); console.log(amt); console.log(invno); console.log(comm); console.log(file); var transactionDetails = { TransactionDate: trandate, Description: descr, Amount: amt, InvoiceNumber: invno, Comments: comm, baseFile: file } //console.log('Transaction Object:' + transactionDetails); //filled transaction Detail array transactionDetailVM.push(transactionDetails); console.log(transactionDetailVM); //reimFiles.push(file); } //filled model ClaimTransactionVM = { TransactionName: claimTitle, ClaimType: claimType, TransactionDetails: transactionDetailVM }; // console.log('Model:'+ClaimTransactionVM); } $("#btnSubmit").click(function SaveReimbursements() { //Validations will run console.log('Save button called'); debugger; getAllData(); if (ClaimTransactionVM !== null) { var FormClaims = new FormData(); FormClaims.append('currentClaim', JSON.stringify(ClaimTransactionVM)); //FormClaims.append() //console.log(ClaimTransactionVM); //var data = { // currentClaim: ClaimTransactionVM, // files: reimFiles //} $.ajax({ url: '/ClaimProcess/CreateClaim', type: 'POST', processData: false, contentType: 'application/json', data: FormClaims,//JSON.stringify(ClaimTransactionVM), success: function (response) { if (response === true) { console.log('Success: IsSuccess True called'); swal({ title: 'success', text: "Claim Added Successfully.", type: "success", confirmButtonColor: "#007AFF" }); } else if (response === false) { console.log('Success: IsSuccess False called'); swal({ title: "Error!", text: '', type: "warning", confirmButtonColor: "#DD6B55", confirmButtonText: "Ok" }); } } }); } else console.log('Model is empty.') }); 

我需要傳遞的最后一個JSON對象是“ ClaimTransactionVM”，其中包含交易詳細信息列表（每行動態添加）和其他一些參數。

我已經嘗試過以下操作：

1. 使用的var reader = new FileReader（）; 並將文件轉換為base64字符串，並將其傳遞給Json對象。 它在調試模式下效果很好，但是在實時reader中。結果未通過。 不知道為什么。 嘗試了幾乎所有類似遞歸函數的方法，以增加異步代碼的延遲，直到我的對象被填滿。 但是不行。

2. 表單數據：使用JSON.stringify轉換了最終的Json對象，它確實通過了，但是File沒有轉換為HTTPPostedFileBase對象。 當接收到其他參數時，它將跳過文件。

我想知道如何在POST調用中一起發送多個File和這個JSON對象。

Answer 1

我運行了您的代碼，修復了發現的一些錯誤，還修復了上載，它現在上載了base64字符串。 在.NET MVC上，您更改base64字符串的句柄並將其保存為文件。

更新的代碼：

 var rowCount; var transactionDetailVM = []; var ClaimTransactionVM = {}; var reimFiles = []; var fileString = ''; var reader; var preview = ''; $(document).ready(function () { rowCount = 1; $("#btnAdd").click(function () { // rowCount++; //Validations will run before adding a new row. var rowdiv = '<div class="row pt-20">' + '<div class="col-md-2"> ' + ' <div class="form-group"> ' + ' <label class="control-label">Transaction Date</label>' + ' <input type="text" name="TransactionDate' + rowCount + '" id="mdate' + rowCount +'" class="form-control tdate01" value="" required />' + ' </div>' + ' </div>' + '<div class="col-md-2" >' + ' <div class="form-group">' + ' <label class="control-label">Description</label>' + '<textarea name="Description' + rowCount +'" id="Description' + rowCount +'" class="form-control descr01" cols="2" rows="2"></textarea>' + '</div>' + '</div>' + '<div class="col-md-1">' + '<div class="form-group">' + '<label class="control-label">Amount</label>' + ' <input type="text" name="Amount' + rowCount + '" id="Amount' + rowCount +'" class="form-control amt01" />' + '</div>' + '</div>' + '<div class="col-md-1" >' + '<div class="form-group">' + '<label class="control-label">Invoice #</label>' + '<input type="text" name="InvoiceNo' + rowCount + '" id="InvoiceNo' + rowCount +'" class="form-control inv01" />' + '</div>' + '</div>' + '<div class="col-md-2" >' + '<div class="form-group">' + '<label class="control-label">Comments</label>' + '<textarea name="Comments' + rowCount +'" id="Comments' + rowCount +'" class="form-control comm01" cols="1" rows="2"></textarea>' + ' </div></div>' + '<div class="col-md-2">' + '<div class="form-group">' + ' <label>Upload Invoice</label>' + '<input type="file" onChange="startRead2(\\'' + rowCount + '\\')" name="postedFile' + rowCount + '" id="postedFile' + rowCount + '" class="form-control file01" />' + '<input type="hidden" name="hiddenfile' + rowCount + '" id="hiddenfile' + rowCount+'"/>' + '</div>' + '</div>' + '<div class="col-md-2">' +'<div class="form-group">' + '<input type = "button" id ="btnRemove" value="- Row" class="btn btn-danger" />' +'</div>' +'</div>' +'</div>'; $('#newClaimForm').append(rowdiv); // debugger; //$("input[name*='TransactionDate']").css("background-color", "yellow"); // Adding these controls to Main table class }); }); $(document).on("click", "#btnRemove", function () { $(this).closest("div[class='row pt-20']").remove(); }); function startRead2(id) { var file2 = document.getElementById('postedFile'+id); preview = id; if (!file2.files[0]) { return; } //add data type for upload validation if ((file2.files[0].type != 'image/jpeg') && (file2.files[0].type != 'image/jpg') && (file2.files[0].type != 'image/png')) { alert('File Type not Supported. File must be jpeg or png'); file2.value = ''; return; } let filex = file2.files[0]; var reader2 = new FileReader(); var reader_data2 = reader2.readAsDataURL(filex); reader2.onload = this.addImage2; } function addImage2(imgsrcs) { let hidden_bin = document.getElementById('hiddenfile'+preview); hidden_bin.value = imgsrcs.target.result; } function getAllData() { console.log('getalldata called'); var claimTitle = $('#TransactionName').val(); var claimType = $('#ClaimTypes').val(); //Transaction Details for (var i = 1; i <= rowCount; i++) { var trandate = $('#mdate' + i).val(); var descr = $('#Description' + i).val(); var amt = $('#Amount' + i).val(); var invno = $('#InvoiceNo'+i).val(); var comm = $('#Comments' + i).val(); var transactionDetails = { TransactionDate: trandate, Description: descr, Amount: amt, InvoiceNumber: invno, Comments: comm, baseFile: base64_file } transactionDetailVM.push(transactionDetails); console.log(transactionDetailVM); } //filled model ClaimTransactionVM = { TransactionName: claimTitle, ClaimType: claimType, TransactionDetails: transactionDetailVM }; } $("#btnSubmit").click(function SaveReimbursements() { //Validations will run console.log('Save button called'); // debugger; getAllData(); if (ClaimTransactionVM !== null) { var FormClaims = new FormData(); FormClaims.append('currentClaim', JSON.stringify(ClaimTransactionVM)); $.ajax({ url: '/ClaimProcess/CreateClaim', type: 'POST', processData: false, contentType: 'application/json', data: FormClaims,//JSON.stringify(ClaimTransactionVM), success: function (response) { if (response === true) { console.log('Success: IsSuccess True called'); swal({ title: 'success', text: "Claim Added Successfully.", type: "success", confirmButtonColor: "#007AFF" }); } else if (response === false) { console.log('Success: IsSuccess False called'); swal({ title: "Error!", text: '', type: "warning", confirmButtonColor: "#DD6B55", confirmButtonText: "Ok" }); } } }); } else console.log('Model is empty.') }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row pt-20"> <div class="col-md-2"> <div class="form-group"> <label class="control-label">Transaction Date</label> <input type="text" name="TransactionDate1" id="mdate1" class="form-control tdate01" value="" required /> </div> </div> <div class="col-md-2"> <div class="form-group"> <label class="control-label">Description</label> <textarea name="Description1" id="Description1" class="form-control descr01" cols="2" rows="2"></textarea> </div> </div> <div class="col-md-1"> <div class="form-group"> <label class="control-label">Amount</label> <input type="text" name="Amount1" id="Amount1" class="form-control amt01" required /> </div> </div> <div class="col-md-1"> <div class="form-group"> <label class="control-label">Invoice #</label> <input type="text" name="InvoiceNo1" id="InvoiceNo1" class="form-control inv01" required /> </div> </div> <div class="col-md-2"> <div class="form-group"> <label class="control-label">Comments</label> <textarea name="Comments1" id="Comments1" class="form-control comm01" cols="1" rows="2"></textarea> </div> </div> <div class="col-md-2"> <div class="form-group"> <label>Upload Invoice</label> <input type="file" name="postedFile1" onChange="startRead2('1')" id="postedFile1" class="form-control file01" required /> <input type="hidden" name="hiddenfile1" id="hiddenfile1" value=""/> </div> </div> <div id="newClaimForm"></div> <div class="col-md-2"> <div class="form-group"> <br /> <input type="button" id="btnAdd" value="+ Row" class="btn btn-dark" /> </div> </div> </div> <div class="form-actions mt-40"> **<button type="button" id="btnSubmit" class="btn btn-success"> <i class="fa fa-check"></i> Save</button>** </div>