将用户选择的 CSV 文件中的数据导入 HTML 文本输入答案

【问题标题】：import data from user selected CSV file to HTML text input将用户选择的 CSV 文件中的数据导入 HTML 文本输入
【发布时间】：2018-03-06 05:21:14
【问题描述】：

我想将用户选择的 CSV 文件中的联系人号码导入 HTML 文本输入字段。我的 CSV 文件存储姓名和手机号码，我想将所有手机号码导入以空格或, 分隔的 HTML 文本输入

【问题讨论】：

How to read data From *.CSV file using javascript?的可能重复
我不这么认为。我希望用户在阅读之前选择文件

标签： javascript html csv import-csv

【解决方案1】：

您可以使用Papa Parse 从您的 CSV 文件中读取数据。这是正在运行的示例。

var mob = [];
$("input[type=file]").change(function(){
	$("input[type=file]").parse({
		config: {
			delimiter: "",	// auto-detect
			newline: "",	// auto-detect
			quoteChar: '"',
			header: false,
			complete: function(results, file) {
				for(var i=0; i<results.data.length;i++){
					mob.push(results.data[i][1]); //modify this line as per the format of your CSV file
				}
				console.log(mob);
				$(".d").val(mob.toString());
			}
		}
	});
});

<!DOCTYPE html>
<html>
	<head>
		<title>Papa</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.7/papaparse.min.js"></script>
	</head>
	<body>
		<input type="file">
		<input type="text" class="d">		
	</body>
</html>

我的 CSV 文件以以下格式存储数据name,mobile，因此数组中手机号码的位置将为[1]

【讨论】：