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

【问题标题】：How to use uploaded file in html?如何在html中使用上传的文件？
【发布时间】：2015-03-05 11:07:40
【问题描述】：

我正在开发一个可以使用上传的 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

}

我是初学者，如果有人可以帮助我，我将不胜感激

谢谢。

【问题讨论】：

现在我只需要它离线工作，所以没有“服务器”
这可以完全在浏览器中使用 FileReader API 完成。

标签： javascript jquery html css json

【解决方案1】：

html - 创建文件输入

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

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

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/

【讨论】：

【解决方案2】：

您可能可以使用 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

【讨论】：