因此，我有一个任务，使用javascript将s3存储桶中的csv连接到静态网页。我知道使用javascript上传和显示用户输入的csv非常简单，但我希望用户按下按钮，在网页上加载/显示整个csv。我现在有一个叫做“生成统计信息”的按钮，我希望它能做三件事：上传csv，显示csv，以及显示一些静态文本，比如平均年龄。我这样做部分是为了解决使用lambda的问题，因为到目前为止，我在这方面失败得很惨。
理想情况下，我希望页面最初看起来像这样：
然后，在用户单击按钮后，我希望页面上传数据集，如下所示。请注意，我只能通过让用户从本地手动上传csv来实现这一点，这就是为什么文件上传按钮仍然存在的原因。我希望去掉这个按钮，只让“生成统计信息”按钮工作：
当我在小提琴上运行这个时，我得到了一个404错误。有人知道我哪里会出错吗？
我的html代码如下。我从这个github获得了csv格式部分，从这里获得了javascript/s3连接部分。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>HTML5 File API</title>
</head>
<body >
<div>
<form class="form-horizontal well">
<legend>
<h3>
<div id="title">HTML5 File API</div>
</h3>
</legend>
<fieldset>
<label for="csvFileInput"> <strong>CSV File:</strong>
</label>
<button onclick="myFunction()">Generate Statistics</button>
</div>
</fieldset>
</form>
<div id="output">
<p id="demo"></p>
</div>
</div>
<br>
<br>
<footer>
<center>
<p>© Mounir Messelmeni 2012</p>
</center>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="js/read-csv.js"></script>
<script>
function myFunction() {
myvar = 'Average Age is 37';
document.getElementById("demo").innerHTML = myvar;}
</script>
<script src="messages.js">
var AWS = require('aws-sdk');
AWS.config.update(
{
accessKeyId: "X",
secretAccessKey: "X",
}
)
var s3 = new AWS.S3();
s3.getObject(
{ Bucket: "fakeemployee", Key: "Employee_Attrition_Data.csv" },
function (error, data) {
if (error != null) {
alert("Failed to retrieve an object: " + error);
} else {
alert("Loaded " + data.ContentLength + " bytes");
// do something with data.Body
var csv = data.Body;
processData(csv);
}
}
)
function processData(csv) {
var allTextLines = csv.split(/\r\n|\n/);
var lines = [];
while (allTextLines.length) {
lines.push(allTextLines.shift().split(','));
}
console.log(lines);
drawOutput(lines);
}
//if your csv file contains the column names as the first line
function processDataAsObj(csv){
var allTextLines = csv.split(/\r\n|\n/);
var lines = [];
//first line of csv
var keys = allTextLines.shift().split(',');
while (allTextLines.length) {
var arr = allTextLines.shift().split(',');
var obj = {};
for(var i = 0; i < keys.length; i++){
obj[keys[i]] = arr[i];
}
lines.push(obj);
}
console.log(lines);
drawOutputAsObj(lines);
}
function errorHandler(evt) {
if(evt.target.error.name == "NotReadableError") {
alert("Canno't read file !");
}
}
function drawOutput(lines){
//Clear previous data
document.getElementById("output").innerHTML = "";
var table = document.createElement("table");
for (var i = 0; i < lines.length; i++) {
var row = table.insertRow(-1);
for (var j = 0; j < lines[i].length; j++) {
var firstNameCell = row.insertCell(-1);
firstNameCell.appendChild(document.createTextNode(lines[i][j]));
}
}
document.getElementById("output").appendChild(table);
}
//draw the table, if first line contains heading
function drawOutputAsObj(lines){
//Clear previous data
document.getElementById("output").innerHTML = "";
var table = document.createElement("table");
//for the table headings
var tableHeader = table.insertRow(-1);
Object.keys(lines[0]).forEach(function(key){
var el = document.createElement("TH");
el.innerHTML = key;
tableHeader.appendChild(el);
});
//the data
for (var i = 0; i < lines.length; i++) {
var row = table.insertRow(-1);
Object.keys(lines[0]).forEach(function(key){
var data = row.insertCell(-1);
data.appendChild(document.createTextNode(lines[i][key]));
});
}
document.getElementById("output").appendChild(table);
}
</script>
</body>
</html>编辑：我已确认s3桶/钥匙正确。请看我的水桶截图：
暂无答案！
目前还没有任何答案，快来回答吧！