JavaScript中用class/name替代ID选择元素适配WordPress动态ID

由于WordPress主题生成的文件上传元素ID是动态的，原脚本通过getElementById获取元素的方式失效，你可以通过name属性或class属性来定位元素，以下是两种修改方案：

方案一：通过name属性获取元素 #

利用document.querySelector根据name属性定位元素，代码如下：

<input type="file" name="files[]" id="video573623_upload_field" class="custom-file-input" multiple="">

<script>
// 通过name属性获取上传元素
var uploadField = document.querySelector('[name="files[]"]');

uploadField.onchange = function() {
    // 判断文件大小（此处为10000字节，即10KB）
    if(this.files[0].size > 10000){
       alert("File is too big!");
       this.value = "";
    };
};
</script>

如果页面存在多个同名上传元素，可使用document.getElementsByName('files[]')获取元素集合，再通过索引指定目标元素（如getElementsByName('files[]')[0]）。

方案二：通过class属性获取元素 #

通过document.querySelector根据class类名定位元素，代码如下：

<input type="file" name="files[]" id="video573623_upload_field" class="custom-file-input" multiple="">

<script>
// 通过class属性获取上传元素
var uploadField = document.querySelector('.custom-file-input');

uploadField.onchange = function() {
    if(this.files[0].size > 10000){
       alert("File is too big!");
       this.value = "";
    };
};
</script>

若页面有多个同class的元素，也可以用document.getElementsByClassName('custom-file-input')获取集合后指定索引。

注：代码中的10000是文件大小限制（单位：字节），可根据需求修改为对应数值（如10MB则改为10*1024*1024=10485760）。

内容的提问来源于stack exchange，提问作者Dankimi