我的網站上我有一個領域的多文件上傳表單：多文件上傳「文件[]」 JavaScript驗證
<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，但我不知道如何從名稱「文件[]」這個領域獲得值，如何JavaScript看到這個領域，數組或...？ 如何使用javascript
<!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[]');
\t for(var i=0;i<input.length;i++){
\t \t var file = input[i].files[0];
\t \t \t bodyAppend("p", "File " + file.name + " is " + formatBytes(file.size) + " in size"+" & type is "+ fileType(file.name));
\t \t }
\t }
\t //function to append result to view
\t function bodyAppend(tagName, innerHTML) {
\t \t var elm;
\t \t elm = document.createElement(tagName);
\t \t elm.innerHTML = innerHTML;
\t \t document.body.appendChild(elm);
\t }
\t
\t //function to find size of file in diff UNIT
\t function formatBytes(bytes,decimals) {
\t if(bytes == 0) return '0 Byte';
\t var k = 1000;
\t var dm = decimals + 1 || 3;
\t var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
\t var i = Math.floor(Math.log(bytes)/Math.log(k));
\t return parseFloat((bytes/Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
\t }
\t //function to find file type
\t function fileType(filename){
\t \t return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined;
\t }
</script>
</body>
</html>檢查這個，現在你可以把條件對文件類型&大小。
// 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);
}
}
<!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>，你可以得到的文件名類似這樣的應用大小和文件類型的驗證。
謝謝但是，如何應用圖像大小驗證和類型驗證 –
感謝Bhavik沃拉但已經有這樣做一個
<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>
不太明白，但我以爲你要選擇的DOM？嘗試將'id'改爲'class'，因爲你不能有多個ID，並且使用'document.getElementsByClassName（「files」）'來選擇DOM。 –
你想要驗證哪種類型的文件？ –