如何使用JSP從上傳的.csv文件自動更新表單文本字段？

Question

我已經創建了用於創建表單的JSP文件。

我試圖通過使用輸入type = file標記上載.csv文件來自動更新或自動將數據打印到表單的文本字段中，然后使用JSP計算.csv文件中商品的總價。 那就是我必須將從.csv文件計算出的總價格打印到表單的文本字段中。

以下是JSP文件。

假設.csv文件僅包含1列，其中包含不同項目的價格。

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <link rel="stylesheet" href="../CSS/bootstrap.css"> </head> <body> <div class="row"> <div class="container"> <div class="col-md-2"></div> <div class="col-md-8"> <div class="form-area"> <form role="form" method="post" action="../AddDistributorDetail"> <br style="clear:both"> <h3 style="margin-bottom: 25px; text-align: center;">Distributor Registration</h3> <div class="form-group"> <label class="control-label">Distributor Name:</label> <input type="text" class="form-control" id="name" name="name" placeholder="Name" required> </div> <div class="form-group"> <label class="control-label">Contact No #1:</label> <input type="text" class="form-control" id="contact1" name="contact1" placeholder="Contact No1" required> </div> <div class="form-group"> <label class="control-label">Contact No #2:</label> <input type="text" class="form-control" id="contact2" name="contact2" placeholder="Contact No2" required> </div> <div class="form-group"> <label class="control-label">Address #1:</label> <textarea class="form-control" type="textarea" id="address1" placeholder="First Address" maxlength="200" rows="7"></textarea> </div> <div class="form-group"> <label class="control-label">Address #1:</label> <textarea class="form-control" type="textarea" id="address2" placeholder="Second Address" maxlength="200" rows="7"></textarea> </div> <div class="form-group"> <label class="control-label">City:</label> <input type="text" class="form-control" id="city" name="city" placeholder="City" required> </div> <div class="form-group"> <label class="control-label">Pincode:</label> <input type="text" class="form-control" id="pin" name="pin" placeholder="Pincode" required> </div> <div class="form-group"> <label class="control-label">Zone:</label> <div class="radio"> <label><input type="radio" name="zone">East</label> </div> <div class="radio"> <label><input type="radio" name="zone">South</label> </div> <div class="radio"> <label><input type="radio" name="zone">West</label> </div> <div class="radio"> <label><input type="radio" name="zone">North</label> </div> </div> <div class="form-group"> <label class="control-label">STB Limit:</label> <input type="text" class="form-control" id="stblimit" name="stblimit" placeholder="Set Top Box Limit" required> </div> <div class="form-group"> <label class="control-label">Credit Limit:</label> <input type="text" class="form-control" id="climit" name="climit" placeholder="Max Credit Limit" required> </div> <div class="form-group"> <label class="control-label">Upload STB Inventory</label> <input type="file" class=" file form-control" id="file_upload" name="file_upload" enctype="multipart/form-data" multiple required> </div> <div class="form-group"> <label class="control-label">Total Cost Of Inventory</label> <input type="text" class="form-control" id="tcost" name="tcost" placeholder="Total Cost Of Inventory" required> </div> <button type="button" id="submit" name="submit" class="btn btn-primary">Submit Form</button> </form> </div> </div> <div class="col-md-2"></div> </div> </div> <script type="text/javascript" src="../JS/jquery.js"></script> <script type="text/javascript" src="../JS/bootstrap.js"></script> </body> </html>

盡管我理解如何在JSP中讀取csv文件，但我在互聯網上進行搜索，但沒有找到任何有關如何上傳文件並實時計算總價格的邏輯（即，在同一JSP頁面中，並且在單擊之前提交按鈕）並在表單中的文本字段中進行打印。

任何對此的幫助將不勝感激。

Answer 1

您可以創建Pojo類並聲明文件中存在的所有字段，然后從csv文件中讀取字段，然后將其設置為可以映射到jsp字段的各個對象。

Answer 2

您可以使用ajax表單提交上傳文件。 上傳后，在服務器端只需讀取csv並將結果寫回到響應中即可。 收到結果后，您可以操作dom元素。

更簡單的方法是使用JavaScript“ FileReader” API，大多數瀏覽器都支持

<script type='text/javascript'>
    var readFile = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
            document.getElementById("myTextarea").value =reader.result;
        };
        reader.readAsText(input.files[0]);
      };
</script>
<body>
  <input type='file' onchange='readFile(event)'><br>
<textarea id='myTextarea'></textarea>

</body>

Js小提琴鏈接： http : //jsfiddle.net/gtxfye8m/

我已經在Chrome邊緣測試過。

如何使用JSP從上傳的.csv文件自動更新表單文本字段？

問題描述

2 個解決方案

解決方案1
0 2015-11-20 14:06:04

解決方案2
0 2015-11-20 18:44:20

如何使用JSP從上傳的.csv文件自動更新表單文本字段？

問題描述

2 個解決方案

解決方案1 0 2015-11-20 14:06:04

解決方案2 0 2015-11-20 18:44:20

解決方案1
0 2015-11-20 14:06:04

解決方案2
0 2015-11-20 18:44:20