Question

我正在尝试创建一个图像上传机制，它应该只允许一些常见的图像文件（jpg，png，gif）。如果用户上传任何与这些类型不匹配的文件，我想中止该过程并显示错误消息。我写了下面的代码。它在onLoadStart事件处理程序中有一个mime类型检查机制。我正计划检查loadstart中的mime类型，如果没有，则继续onload事件。否则中止任务。但问题是

每当我上传任何文件时，我都会在控制台中看到错误，说明没有定义fileLoadStart。为什么我收到此错误？我该如何解决？

如果找不到匹配项，我无法动态中止任务。我如何管理

<html>
<body>
<input type='file' id='up'>
<script>




    function readfile(e){

        if(window.File && window.FileReader &&  window.FileList){

                var file=e.target.files[0];


                var fileReader=new FileReader();

                fileReader.onloadstart=fileLoadStart;
                fileReader.onload=fileLoad;


                function fileLoadStart(e){
                        var arr = (new Uint8Array(e.target.result).slice(0,4));

                        console.log(arr);


                        var header = "";
                        for(var i = 0; i < arr.length; i++) {

                                header += arr[i].toString(16);

                        }

                        switch (header) {

                                case "89504e47":
                                    type = "image/png";
                                    console.log(type);
                                    break;

                                case "47494638":
                                    type = "image/gif";
                                    console.log(type);
                                    break;

                                case "ffd8ffe0":
                                case "ffd8ffe1":
                                case "ffd8ffe2":
                                    type = "image/jpeg";
                                    console.log(type);
                                    break;

                                default:
                                    fileReader.abort();
                                    console.log('raeding stopped');
                                    break;


                        } 


                }

                function fileLoad(e){

                         console.log('do nothing');
                }

            fileReader.readAsArrayBuffer(file);

        }else{

             alert('file api not compatible with your browser');
        }  


    }
    document.getElementById('up').addEventListener('change',readfile,false);
</script>
</body>
</html>

Answer 1

您的问题在于您调用函数的方式。

 fileReader.onloadstart=fileLoadStart;
 fileReader.onload=fileLoad;

应该是

在HTML中：

<input type='file' id='up' onloadstart="fileLoadStart(e)" onload="fileLoad(e)">

或在JS中：

document.getElementById('up').addEventListener("loadstart", fileLoadStart(e));
document.getElementById('up').addEventListener("load", fileLoad(e));

限制与已批准的mime类型不匹配的上传文件

1 个答案: