Question

我已经创建了一个用于创建表单的JSP文件。

我正在尝试使用input type = file tag上传.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＆＃34; FileReader＆＃34; 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，edge。

如何使用JSP从上传的.csv文件自动更新表单文本字段？

2 个答案: