Question

在我的网站上，我有多个文件上传表单，其中包含字段：

<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" />

我想用javascript代码验证这些字段，我知道如何使用javascript获取一些简单字段的值，但我不知道如何从名称为“files []”的字段中获取值，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

＆＃13;

<!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>

＆＃13;

你可以得到这样的文件名。

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>

现在检查一下你可以在文件类型和条件上加上条件。大小

Answer 4

感谢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>

多文件上传“文件[]”javascript验证

4 个答案: