Question

我正在开发一个可以使用上传的csv文件并根据它们生成图表的Web应用程序。（对于使用zingchart的图表）。我无法理解如何使用上传的文件。

这是我用于上传按钮的功能

 <form>
            <div class = "uploaddat" >
                <input type="file" name="file"/>
            </div>
        </form>

这就是我需要放置上传文件的地方

"csv":{
    "url":"input/datasample.csv",
  "smart-scales":true,
  "vertical-labels":true

}

我是初学者，所以如果有人能帮助我，我真的很感激

谢谢。

Answer 1

您可以使用javascript进行此操作，但您无法仅使用HTML将文件发送到服务器！

如果要将文件发送到服务器，则需要使用PHP（例如）。

但是，您可能需要查看此博客文章，其中介绍了如何在javascript / HTML5中上传和使用文件！这可以为您提供解决方案。

http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

以下是使用PHP上传和解析CSV文件的示例：How to upload and parse a CSV file in php

Answer 2

html - 创建文件输入

<input type=file id="fileInput" />

js - 在文件输入上放置一个侦听器，用于抓取放入输入的csv文件，并将其读入csv内的reader.onload。

document.querySelector('#fileInput').addEventListener('change', handleFile,false)

function handleFile(e){
    var reader = new FileReader;
    var file   = e.target.files[0]

    reader.onload = function(e){
        var csv = e.target.result

        // execute chart code in here with
        // "csv":{
        //    "data-string": csv,
        //    ...
        // }

    }

    reader.readAsText(file);
}

您在图表选项中使用"data-string"而不是"url"。

http://jsfiddle.net/61en8yaf/

如何在html中使用上传的文件？

2 个答案: