Question

我希望发生的是当用户从HTML页面上传CSV时该文件应保存到我提供的本地目录。

如果文件已经存在则应该覆盖两件事情中的一件，否则它应该创建一个新文件。

以下是我的代码：

<!DOCTYPE html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
    <script type="text/javascript">  
    $(document).ready(function() {

    // The event listener for the file upload
    document.getElementById('txtFileUpload').addEventListener('change', upload, false);

    // Method that checks that the browser supports the HTML5 File API
    function browserSupportFileUpload() {
        var isCompatible = false;
        if (window.File && window.FileReader && window.FileList && window.Blob) {
        isCompatible = true;
        }
        return isCompatible;
    }

    // Method that reads and processes the selected file
    function upload(evt) {
        if (!browserSupportFileUpload()) {
            alert('The File APIs are not fully supported in this browser!');
            } else {
                var data = null;
                var file = evt.target.files[0];
                var reader = new FileReader();
                reader.readAsText(file);
                reader.onload = function(event) {
                    var csvData = event.target.result;
                    data = $.csv.toArrays(csvData);
                    if (data && data.length > 0) {
                    alert('Imported -' + data.length + '- rows successfully!');
                    } else {
                        alert('No data to import!');
                    }
                };
                reader.onerror = function() {
                    alert('Unable to read ' + file.fileName);
                };
            }
        }
    });
</script>
    </head>
    <body>
        <div id="dvImportSegments" class="fileupload ">
    <fieldset>
        <legend>Upload your CSV File</legend>
        <input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />
    </fieldset>
    </div>
	
<script>
document.getElementById("data").innerHTML;
</script>
    </body>
</html>

Answer 1

您需要一个公开此html文件的服务器（PHP或NodeJS）（通常放在公共文件夹中），然后提供此html文件，然后您可以通过服务器进行验证和存储。您可以稍后添加数据库挂钩，但这取决于您的需求以及您要上传的数据量。

上传csv并将其保存到本地文件夹Jquery

1 个答案: