Javascript 如何同时使用getElementsByClassName、onchange和this.value？

我正在尝试检查图像类型的多个文件上载值。使用此html：

<input type="file" name="image" id="fileUpload">

上面的工作很好。但有多种输入：

<input type="file" name="image" id="fileUpload">
<input type="file" name="image" id="fileUpload">
<input type="file" name="image" id="fileUpload">

---

不能有多个具有相同ID的元素，文档中元素的ID必须唯一

可以使用类对类似元素进行分组，然后使用类选择器

因为您已经使用了jQuery标记

<input type="file" name="image" class="fileUpload">
<input type="file" name="image" class="fileUpload">
<input type="file" name="image" class="fileUpload">

---

演示：

不能有多个具有相同ID的元素，文档中元素的ID必须是唯一的

可以使用类对类似元素进行分组，然后使用类选择器

因为您已经使用了jQuery标记

<input type="file" name="image" class="fileUpload">
<input type="file" name="image" class="fileUpload">
<input type="file" name="image" class="fileUpload">

演示：

由于id必须是唯一的，您需要使用类来代替输入：

由于id必须是唯一的，您需要使用类来代替输入：

---

我尝试改为类并使用getElementsByClassName，但没有成功。展示你的努力。您知道需要在循环中迭代集合，对吗？…并且您有一个jQuery标记，但出于某种原因似乎没有使用它。为什么？我尝试改为类并使用getElementsByClassName，但没有成功。展示你的努力。您知道需要在循环中迭代集合，对吗？…并且您有一个jQuery标记，但出于某种原因似乎没有使用它。为什么？@cookiemonster是的，刚刚修复了它。你在Internet Explorer中测试过这个吗？@raina77ow没有。。。你觉得有什么问题吗？嗯，是的；当我玩类似的东西，IE真的不喜欢当输入=文件值已被脚本更改-之后，表单提交被阻止与访问拒绝错误。这就是我问的原因@雷恩：是的@Cookie怪物是的，刚刚修复了它。你在Internet Explorer中测试过这个吗？@raina77ow没有。。。你觉得有什么问题吗？嗯，是的；当我玩类似的东西，IE真的不喜欢当输入=文件值已被脚本更改-之后，表单提交被阻止与访问拒绝错误。这就是我问的原因@雷恩：是的。。。

<input type="file" name="image" class="fileUpload">
<input type="file" name="image" class="fileUpload">
<input type="file" name="image" class="fileUpload">

jQuery(function($){
    var regex = /.\.(jpg|jpeg|png|gif|tiff)$/i;
    $('.fileUpload').change(function () {

        var filename = this.value;
        if (!regex.test(filename)) {
            $(this).replaceWith($(this).clone(true, true));// this.value = "" - does not work with IE
            //see http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery
            alert('Please select an image.');
        }
    });
})

<input type="file" name="image" id="fileUpload">
<input type="file" name="image" id="fileUpload">
<input type="file" name="image" id="fileUpload">

var fileUpload = document.getElementsByClassName('fileUpload');

for (var i = 0; i < fileUpload.length; i++) {
    fileUpload[i].onchange = function () {
        var filename = this.value;
        var a = filename.split(".");
        if (a.length === 1 || (a[0] === "" && a.length === 2)) {
            return "";
        }
        var suffix = a.pop().toLowerCase();
        //if( suffix != 'jpg' && suffix != 'jpeg' && suffix != 'png' && suffix != 'gif' && suffix != 'tiff'){
        if (!(suffix in {
            jpg: '',
            jpeg: '',
            png: '',
            gif: '',
            tiff: ''
        })) {
            this.value = "";
            alert('Please select an image.');
        }
    }
}