仅通过Html文件输入接受csv文件

Question

下面给出了Html文件输入标记，只接受.csv文件。

<input id="csvFileInput" type="file" accept=".csv"/>

这很完美。但我的情况是......

在文件选择窗口中，用户可以选择所有类型＆＃39;而不是＆＃39; .csv文件＆＃39;。 然后用户可以选择任何文件类型。 我怎么能处理这种情况呢？

我可以处理仅更改Html标记吗？还是要实施的其他Javascript策略？

谢谢， 最好的问候..

Answer 1

您可以添加验证onchange验证文件扩展名。

虽然在html中输入类型接受.png但是在js中正则表达式失败，因为它被设计为仅接受csv。您可以修改html以仅接受csv

＆＃13;

＆＃13;

var regex = new RegExp("(.*?)\.(csv)$");

function triggerValidation(el) {
  if (!(regex.test(el.value.toLowerCase()))) {
    el.value = '';
    alert('Please select correct file format');
  }
}

＆＃13;

<input id="csvFileInput" type="file" accept=".png" onchange='triggerValidation(this)'>

＆＃13;

＆＃13;

＆＃13;

Answer 2

HTML始终允许用户点击“所有文件”

是否限制＆＃34; accept =＆＃34;使用扩展程序或mime类型或两者，用户始终可以切换到“所有文件”。

需要Javascript

例如，

var selectedFile = document.getElementById('csvFileInput');
selectedFile.onchange = function(e){
    switch ((this.value.match(/\.([^\.]+)$/i)[1]).toLowerCase()) {
        case 'csv':
        case 'txt': /* since they might have a CSV saved as TXT */
             /* ... insert action for valid file extension */
        default:
            /* Here notify user that this file extension is not suitable */
            this.value=''; /* ... and erase the file */
    }
};

还需要服务器端验证

请记住，用户总是可以通过将.exe重命名为.csv来打败进程，因此在相关的位置，您还应该在服务器端检查文件的内容以满足您的条件。