如何重用javascript文件大小检查验证功能

Question

我的表单中有两个文件输入。(#file1和#file2(

<input type="file" name="file1" required="required" id="file1"
onchange="size1Check();"
accept="image/png, image/jpeg, image/jpg, image/gif"
required="required" />
<input type="file" name="file2"
required="required" id="file2" onchange="size2Check();"
accept="image/png, image/jpeg, image/jpg, image/gif"
required="required" />

我做了这个文件大小检查功能！

function size1Check(){
var size = document.getElementById("file1").files[0].size;
console.log("size : " + size);
if(size > 1024 * 1024 * 2){
alert('your file size : ' + (Math.round(size / 1024 / 1024 * 100) / 100) + 'MB');
$("input[id=file1]").val("");
}
else return; 
}

function size2Check(){

var size2 = document.getElementById("file2").files[0].size;
console.log("size2 : " + size2);

if (size2 > 1024 * 1024 * 2){
alert('your file size : ' + (Math.round(size2 / 1024 / 1024 * 100) / 100) + 'MB');
$("input[id=file2]").val("");
}

else return;
}

正如您所看到的，size1Check和size2Check函数几乎是相同的，除了id(file1和file2(如何重用函数以简化代码？

非常感谢！

Answer 1

不要使用内联处理程序-在现代web开发中，它们被普遍认为是相当糟糕的做法。您可以迭代每个需要处理程序的<input>，并在每个上调用addEventListener：

for (const input of document.querySelectorAll('input[type="file"]')) {
input.addEventListener('change', () => {
const size = input.files[0].size;
console.log("size : " + size);
if (size > 1024 * 1024 * 2) {
alert('your file size : ' + (Math.round(size / 1024 / 1024 * 100) / 100) + 'MB');
input.value = '';
}
});
}

<input type="file" name="file1" required="required" accept="image/png, image/jpeg, image/jpg, image/gif" required="required" />
<input type="file" name="file2" required="required" accept="image/png, image/jpeg, image/jpg, image/gif" required="required" />

或者，如果你只想创建一个处理程序函数，你可以

const handler = (e) => {
const input = e.target;
const size = input.files[0].size;
console.log("size : " + size);
if (size > 1024 * 1024 * 2) {
alert('your file size : ' + (Math.round(size / 1024 / 1024 * 100) / 100) + 'MB');
input.value = '';
}
};
for (const input of document.querySelectorAll('input[type="file"]')) {
input.addEventListener('change', handler);
}

<input type="file" name="file1" required="required" accept="image/png, image/jpeg, image/jpg, image/gif" required="required" />
<input type="file" name="file2" required="required" accept="image/png, image/jpeg, image/jpg, image/gif" required="required" />

(根据需要更改CSS选择器input[type="file"]，将处理程序仅添加到要将处理程序添加到的<input(

Answer 2

这可以通过将值作为参数传递给函数sizeCheck()来实现，并将其进一步定义为另一个参数，但对于document.getElementById()。像这样：

function sizeCheck(element) {
var size = document.getElementById(element).files[0].size;
...
}

参数是元素。

但是，在每个标记的html中，在事件onchange内，必须使用id属性指定当前元素以标识当前元素。像这样：

onchange="sizeCheck(this.id);

并删除每个input标签中重复的required="required"属性。

这是完整的片段：

function sizeCheck(element) {
var size = document.getElementById(element).files[0].size;
console.log("size : " + size);
if (size > 1024 * 1024 * 2) {
alert("your file size : " + Math.round((size / 1024 / 1024) * 100) / 100 + "MB");
$("input[id=file1]").val("");
} else return;
}

<input type="file" name="file1" required="required" id="file1" onchange="sizeCheck(this.id);" accept="image/png, image/jpeg, image/jpg, image/gif" />
<input type="file" name="file2" required="required" id="file2" onchange="sizeCheck(this.id);" accept="image/png, image/jpeg, image/jpg, image/gif" />