问题：

如何仅允许excel文件上载[重复]

景修杰

2023-03-14

我正在使用我在网上找到的一篇文章中的JavaScript /AngularJS代码摘录。我对它做了一些调整，因为原始帖子在IE 11上不起作用，但除此之外，我正在使用我找到的它。这段代码允许您将Excel文件上传到jQuery数据表并读取。

我缺少一个要求，如果可能的话，我想寻求帮助。该要求是只允许上传Excel文件，没有其他类型的文件应该对用户“可见”。

这是我正在使用的代码：

AngularJS控制器：

var app = angular.module('MyApp', []);
app.controller('MyController', ['$scope', '$http', function ($scope, $http) {

    $scope.SelectedFileForUpload = null;

    $scope.UploadFile = function (files) {
        $scope.$apply(function () {   
            $scope.Message = "";
            $scope.SelectedFileForUpload = files[0];
        })
    }

    //Parse Excel Data   
    $scope.ParseExcelDataAndSave = function () {

        var file = $scope.SelectedFileForUpload;

        if (file) {

            var reader = new FileReader();

            reader.onload = function (e) {

                var filename = file.name;
                // pre-process data
                var binary = "";
                var bytes = new Uint8Array(e.target.result);
                var length = bytes.byteLength;

                for (var i = 0; i < length; i++) {
                    binary += String.fromCharCode(bytes[i]);
                }

                // call 'xlsx' to read the file
                var data = e.target.result;
                var workbook = XLSX.read(binary, { type: 'binary', cellDates: true, cellStyles: true });
                var sheetName = workbook.SheetNames[0];
                var excelData = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);

                if (excelData.length > 0) {
                    //Save data   
                    $scope.SaveData(excelData);
                }
                else {
                    $scope.Message = "No data found";
                }            };



            }
            reader.onerror = function (ex) {
                console.log(ex);
            }

            reader.readAsArrayBuffer(file);
        }

html视图：

<body ng-app="MyApp">
    <div class="container py-4" ng-controller="MyController">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5>Common Council List</h5>
            </div>
            <div class="card-body">

                @* Upload Button *@
                <button style="margin-bottom:10px;" type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#myModal">
                    <i class="fa fa-file-excel-o"></i> Upload Excel File
                </button>

                @* Modal Window *@
                <div class="modal" id="myModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Upload Common Council Data</h4>
                                <button type="button" class="close" data-dismiss="modal">×</button>
                            </div>
                            <div class="modal-body">
                                <div class="col-md-12">
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" name="file" class="custom-file-input" onchange="angular.element(this).scope().UploadFile(this.files)" />
                                            <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" ng-disabled="!SelectedFileForUpload" ng-click="ParseExcelDataAndSave()"><i class="fa fa-upload"></i> Upload</button>
                                        </div>
                                    </div>
                                    <span class="text-success">
                                        {{Message}}
                                    </span>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger rounded-0" data-dismiss="modal" ng-click="clearText()">Close</button>
                            </div>
                        </div>
                    </div>
                </div>



                @* Main Table *@
                <table id="dataTable" class="table table-bordered table-striped" ;>
                    <thead>
                        <tr>
                            <th style="width: 90px;">Meeting ID</th>
                            <th style="width: 105px;">Agenda Item</th>
                            <th style="width: 85px;">Legistar ID</th>
                            <th>Title</th>
                        </tr>
                    </thead>
                </table>


            </div>
        </div>
    </div>
</body>

在此方面如有任何帮助，将不胜感激。

谢谢你伊拉斯莫

更新

HTML标记

@* Modal Window *@
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Upload Common Council Data</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" name="file" class="custom-file-input" onchange="angular.element(this).scope().UploadFile(this.files)" />
                            <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
                        </div>
                        <div class="input-group-append">
                            <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>
                        </div>
                    </div>
                    <span class="text-success">
                        {{Message}}
                    </span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger rounded-0" data-dismiss="modal" ng-click="clearText()">Close</button>
            </div>
        </div>
    </div>
</div>

共有3个答案

夏侯臻

2023-03-14

如果您想要安全的东西，请检查文件前n个字节中的幻数。

读取幻数

类似这样：

const isXlsFile = (chunk) => {
    const types = [
        {
            ext: 'xls',
            mime: 'application/vnd.ms-excel',
            // magic numbers
            bytes: new Uint8Array([0x09, 0x08, 0x10, 0x00, 0x00, 0x06, 0x05, 0x00])
        },
        {
            ext: 'xlsx',
            mime: 'application/vnd.ms-excel',
            bytes: new Uint8Array([0x50, 0x4B, 0x03, 0x04, 0x14, 0x00, 0x06, 0x00])
        }
    ]

    for (const type of types) {
        if (chunk.indexOf(type.bytes) === 0) return type;
    }

    return false;
};

这只是为了检查，如果它与您的类型匹配，则继续保存文件

高云瀚

2023-03-14

<input type="file" accept=".xlsx, .xls, .csv"/>

荆炳

2023-03-14

您只需向您的输入添加属性即可实现这一点，如下所示：

<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 Files 2007（. xlsx），请使用：

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

此外，您可以在这里找到SO中的相同问题。

类似资料：

允许Dropzone js仅上载zip文件

但应用程序仍然允许上传任何MIME类型的文件。哪里有问题？另外，限制maxFiles也不起作用--它允许我上传无限多个文件。
如何使用ASP.NET允许下载.json文件

问题内容：如何才能从旧的ASP.NET网站（我相信是IIS6）下载* .json文件？我正在获取404页面而不是JSON文件。我需要创建一个web.config文件吗？里面有什么？问题答案：将JSON MIME类型添加到IIS6。按照MSDN的“配置MIME类型（IIS 6.0）”中的说明进行操作。扩展名： .json MIME类型： application / json 更改后不要
HashSet如何不允许重复？

我正在检查< code>HashSet的< code>add方法。有人提到如果该集合已经包含元素，则调用保持集合不变，并返回false。但是方法在内部保存中的值的方法声明将指定值与该映射中的指定键相关联。如果映射先前包含该键的映射，则旧值将被替换。那么，如果的方法替换了旧值，那么方法如何在元素重复的情况下保持集合不变？
仅允许java scanner允许数字

我一直在捕捉非数字时遇到问题。我试过了，但抓不住。如果我让它捕获非数字，但不让用户再次尝试输入。。。它完全停止了我的代码。这是我的密码：
Swift-仅在iPad上允许旋转

问题内容：如何允许我在iOS 8.3 SDK中用Swift编写的通用应用程序在iPhone上仅支持纵向模式，而在iPad上既支持纵向模式又支持横向模式？我知道过去这是在AppDelegate中完成的。我该如何在Swift中做到这一点？问题答案：您可以以编程方式进行操作，或者更好的是，您可以简单地编辑项目的Info.plist（这应该更实用，因为它是全局设备配置）只需添加“支持的界面方向（
如何在ReactJS的文本框中仅允许数字？

问题内容：如何只允许在数字中使用而已？问题答案：基本思想是：使用受控组件（使用值和输入字段的onChange属性），并在onChange句柄内部检查输入的值是否为正确的数字。仅当输入的值是有效数字时才更新状态。为此使用此正则表达式： onChange处理程序将为：工作示例：

如何仅允许excel文件上载[重复]

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档