Question

我无法使我的代码正常工作。我的JavaScript的第一部分不起作用。最后一部分有效，但在消息后插入图像。

我的代码可能与其他JavaScript文件冲突吗？那不能解释为什么第二部分仍然起作用并且仍然添加图像吗？

我的JavaScript与HTML位于同一文件中，因为否则onload功能将无法正常工作。

<script> 
window.onload = function(){
    var uploadField = document.getElementById("frontImages");
    uploadField.onchange = function() {
        if(this.files[0].size > 200){
        alert("File is too big!");
        this.value = "";
        };
    };
}
window.onload = function() {
    var uploadField = document.getElementById("itemImages");

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

我的HTML：

<div class="row">
   <div class="col-md-6">
      <label>Front Image:</label>
         <input type="file" name="frontImage[]" id="frontImages" class="form-control uploadButton" required="true">
         <div id="previewFront" class="previewImage">
            <img id="previewFrontImage" style="display: none;" src="#"/>
          </div>
            <label>Please upload a jpg, jpeg, gif or a png file. (MAX 2MB)</label>
          </div>
            <div class="col-md-6">
               <label>Item Image(s):</label>
               <input type="file" name="itemImages[]" id="itemImages" class="form-control uploadButton" multiple="true" required="true">
             <div id="previewItemImages" class="previewItemImage"></div>
                <label>Please upload a jpg, jpeg, gif or a png file. (MAX 2MB)</label>
             </div>
            </div>

Answer 1

您应该使用

window.addEventListener("load", function(event) {
    //your code
  });

而不是 window.onload ，因为第二次设置 window.onload 时，您将覆盖先前设置的函数。 window.addEventListener 允许您添加多个事件。

文档：https://developer.mozilla.org/en-US/docs/Web/Events/load

JavaScript图像大小检查（字节）

1 个答案: