如何只允许Excel文件上传
era*_*los 1 javascript angularjs
我正在使用从网上找到的一篇文章中摘录的 JavaScript /AngularJS 代码。我对它做了一些调整，因为原来的帖子在 IE 11 上不起作用，但除此之外，我按照我发现的方式使用它。这段代码允许您将 Excel 文件上传并读取到 jQuery 数据表。
\n\n我缺少一项要求，如果可能的话，想寻求帮助。该要求是仅允许上传 Excel 文件，用户不应“看到”其他类型的文件。
\n\n这是我正在使用的代码：
\n\nAngularJS 控制器：
\n\nvar app = angular.module(\'MyApp\', []);\napp.controller(\'MyController\', [\'$scope\', \'$http\', function ($scope, $http) {\n\n $scope.SelectedFileForUpload = null;\n\n $scope.UploadFile = function (files) {\n $scope.$apply(function () { \n $scope.Message = "";\n $scope.SelectedFileForUpload = files[0];\n })\n }\n\n //Parse Excel Data \n $scope.ParseExcelDataAndSave = function () {\n\n var file = $scope.SelectedFileForUpload;\n\n if (file) {\n\n var reader = new FileReader();\n\n reader.onload = function (e) {\n\n var filename = file.name;\n // pre-process data\n var binary = "";\n var bytes = new Uint8Array(e.target.result);\n var length = bytes.byteLength;\n\n for (var i = 0; i < length; i++) {\n binary += String.fromCharCode(bytes[i]);\n }\n\n // call \'xlsx\' to read the file\n var data = e.target.result;\n var workbook = XLSX.read(binary, { type: \'binary\', cellDates: true, cellStyles: true });\n var sheetName = workbook.SheetNames[0];\n var excelData = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);\n\n if (excelData.length > 0) {\n //Save data \n $scope.SaveData(excelData);\n }\n else {\n $scope.Message = "No data found";\n } };\n\n\n\n }\n reader.onerror = function (ex) {\n console.log(ex);\n }\n\n reader.readAsArrayBuffer(file);\n }\nhtml视图：
\n\n<body ng-app="MyApp">\n <div class="container py-4" ng-controller="MyController">\n <div class="card">\n <div class="card-header bg-primary text-white">\n <h5>Common Council List</h5>\n </div>\n <div class="card-body">\n\n @* Upload Button *@\n <button style="margin-bottom:10px;" type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#myModal">\n <i class="fa fa-file-excel-o"></i> Upload Excel File\n </button>\n\n @* Modal Window *@\n <div class="modal" id="myModal">\n <div class="modal-dialog">\n <div class="modal-content">\n <div class="modal-header">\n <h4 class="modal-title">Upload Common Council Data</h4>\n <button type="button" class="close" data-dismiss="modal">\xc3\x97</button>\n </div>\n <div class="modal-body">\n <div class="col-md-12">\n <div class="input-group">\n <div class="custom-file">\n <input type="file" name="file" class="custom-file-input" onchange="angular.element(this).scope().UploadFile(this.files)" />\n <label class="custom-file-label" for="inputGroupFile04">Choose file</label>\n </div>\n <div class="input-group-append">\n <button class="btn btn-outline-secondary" type="button" ng-disabled="!SelectedFileForUpload" ng-click="ParseExcelDataAndSave()"><i class="fa fa-upload"></i> Upload</button>\n </div>\n </div>\n <span class="text-success">\n {{Message}}\n </span>\n </div>\n </div>\n <div class="modal-footer">\n <button type="button" class="btn btn-danger rounded-0" data-dismiss="modal" ng-click="clearText()">Close</button>\n </div>\n </div>\n </div>\n </div>\n\n\n\n @* Main Table *@\n <table id="dataTable" class="table table-bordered table-striped" ;>\n <thead>\n <tr>\n <th style="width: 90px;">Meeting ID</th>\n <th style="width: 105px;">Agenda Item</th>\n <th style="width: 85px;">Legistar ID</th>\n <th>Title</th>\n </tr>\n </thead>\n </table>\n\n\n </div>\n </div>\n </div>\n</body>\n对此的任何帮助将不胜感激。
\n\n谢谢你，\n伊拉斯莫
\n\n更新
\n\nhtml 标记
\n\n@* Modal Window *@\n<div class="modal" id="myModal">\n <div class="modal-dialog">\n <div class="modal-content">\n <div class="modal-header">\n <h4 class="modal-title">Upload Common Council Data</h4>\n <button type="button" class="close" data-dismiss="modal">\xc3\x97</button>\n </div>\n <div class="modal-body">\n <div class="col-md-12">\n <div class="input-group">\n <div class="custom-file">\n <input type="file" name="file" class="custom-file-input" onchange="angular.element(this).scope().UploadFile(this.files)" />\n <label class="custom-file-label" for="inputGroupFile04">Choose file</label>\n </div>\n <div class="input-group-append">\n <button class="btn btn-outline-secondary" type="button" ng-disabled="!SelectedFileForUpload" ng-click="ParseExcelDataAndSave()" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />><i class="fa fa-upload"></i> Upload</button>\n </div>\n </div>\n <span class="text-success">\n {{Message}}\n </span>\n </div>\n </div>\n <div class="modal-footer">\n <button type="button" class="btn btn-danger rounded-0" data-dismiss="modal" ng-click="clearText()">Close</button>\n </div>\n </div>\n </div>\n</div>\n
accept您可以通过向您添加属性来简单地实现此目的，input如下所示：
<input type="file" accept=".csv" />
但如果你想更清楚并接受所有版本的 Excel，你应该使用这个：
<input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
对于Excel文件97-2003 (.xls)，请使用：
application/vnd.ms-excel
对于Excel文件2007+ (.xlsx)，请使用：
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
另外，SO 中也有同样的问题，您可以在这里找到。
| 归档时间： |
|
| 查看次数： |
21252 次 |
| 最近记录： |