多文件上传“ files []” JavaScript验证

Question

On my site I have multi file upload form with fields: 在我的网站上，我具有包含字段的多文件上传表单：

<input name="files[]" type="file" id="files" size="30" />
<input name="files[]" type="file" id="files" size="30" />
<input name="files[]" type="file" id="files" size="30" />

and I want to validate this fields with javascript code, I know how to get value for some simple fields with javascript but I don`t know how to get values from this fields with names "files[]", how javascript see this fields, array or...? 并且我想用javascript代码验证此字段，我知道如何使用javascript获取一些简单字段的值，但是我不知道如何从名称为“ files []”的字段中获取值，javascript如何看到此字段，阵列还是...？ How to apply validation of size and file type using javascript 如何使用JavaScript验证大小和文件类型

Answer 1

// Try this jQuery ;)
$("form").on('change', 'input[type=file]', function() {
    var file;
    var this = $(this);
    if (file = this.files[0])
    {
        var img = new Image();

        img.onload = function () {
            // correct 
            // check alert(img.src)
        }

        img.onerror = function () {
            //error info
        };

        img.src = _URL.createObjectURL(file);
    }
}

Answer 2

 <!DOCTYPE html> <html> <body> <input name="files[]" type="file" id="files[]" size="30" /> <input name="files[]" type="file" id="files[]" size="30" /> <input name="files[]" type="file" id="files[]" size="30" /> <button onclick="myFunction()">Get File Type</button> <script> function myFunction() { var file=document.getElementsByName('files[]'); for(var i=0;i<file.length;i++){ console.log(file[i].value); } } </script> </body> </html>

you can get files name like this. 您可以获得这样的文件名。

Answer 3

 <!DOCTYPE html> <html> <body> <input name="files[]" type="file" id="files[]" size="30" /> <input name="files[]" type="file" id="files[]" size="30" /> <input name="files[]" type="file" id="files[]" size="30" /> <button onclick="myFunction()">Get File Name-Type-Size</button> <script> function myFunction() { var input, file; if (!window.FileReader) { bodyAppend("p", "The file API isn't supported on this browser yet."); return; } var input=document.getElementsByName('files[]'); for(var i=0;i<input.length;i++){ var file = input[i].files[0]; bodyAppend("p", "File " + file.name + " is " + formatBytes(file.size) + " in size"+" & type is "+ fileType(file.name)); } } //function to append result to view function bodyAppend(tagName, innerHTML) { var elm; elm = document.createElement(tagName); elm.innerHTML = innerHTML; document.body.appendChild(elm); } //function to find size of file in diff UNIT function formatBytes(bytes,decimals) { if(bytes == 0) return '0 Byte'; var k = 1000; var dm = decimals + 1 || 3; var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; var i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } //function to find file type function fileType(filename){ return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined; } </script> </body> </html>

Check this now you can put conditions on type of file & size. 立即检查，您可以在文件类型和大小上设置条件。

Answer 4

Thanks Bhavik vora But already done with this one 感谢Bhavik vora但已经完成了

   <html>
    <head>
    <title>client-side image (type/size) upload validation</title>
    <meta charset=utf-8>
    <style>
    </style>
    </head>
    <body>
    <form><fieldset><legend>Image upload</legend>
    <input type="file"  name="file[]" onchange="getImg(this,100,'jpeg|png')">
    <input type="file"  name="file[]" onchange="getImg(this,100,'jpeg|png')">  
    </fieldset>
    </form>
    <script>
    function getImg(input,max,accepted){
        var upImg=new Image(),test,size,msg=input.form;
        msg=msg.elements[0].children[0];

        return input.files?validate():
        (upImg.src=input.value,upImg.onerror=upImg.onload=validate);
            "author: b.b. Troy III p.a.e";
        function validate(){
            test=(input.files?input.files[0]:upImg);
            size=(test.size||test.fileSize)/1024;
            mime=(test.type||test.mimeType);
        mime.match(RegExp(accepted,'i'))?
        size>max?(input.form.reset(),msg.innerHTML=max+"KB Exceeded!"):
        msg.innerHTML="Upload ready...":    
        (input.form.reset(),msg.innerHTML=accepted+" file type(s) only!")
        }
    }
    </script> 
    </body>
    </html>

多文件上传“ files []” JavaScript验证

问题描述

4 个解决方案

解决方案1
0 2017-03-08 12:43:37

解决方案2
0 2017-03-08 12:48:37

解决方案3
0 已采纳 2017-03-09 06:29:22

解决方案4
0 2017-03-10 06:04:08

多文件上传“ files []” JavaScript验证

问题描述

4 个解决方案

解决方案1 0 2017-03-08 12:43:37

解决方案2 0 2017-03-08 12:48:37

解决方案3 0 已采纳 2017-03-09 06:29:22

解决方案4 0 2017-03-10 06:04:08

解决方案1
0 2017-03-08 12:43:37

解决方案2
0 2017-03-08 12:48:37

解决方案3
0 已采纳 2017-03-09 06:29:22

解决方案4
0 2017-03-10 06:04:08