0

在此，我有一个给模块（用于筹款的 wordpress 插件），并且我已经集成了文件上传

https://www.mamafrica.it/26964-2/

我添加了一个 java 脚本来检查文件大小和文件类型，但这仅在我不更改付款方式之前有效。

例如：加载页面后，如果我加载的文件> 500KB或与pdf或jpg不同，文件上传区域下方会出现错误消息。如果我切换到“通过银行转账捐款”，表格会发生变化（文件上传区域之前会出现信息文本，并且表格字段正在清理）。现在，如果我选择另一个 > 500KB 的文件（或者不是 pdf 或 jpg），则不会出现错误消息。不调用 javascript 中的“更改”函数。

这是javascript

    <script>
var inputElement = document.getElementById("fileToUpload")

inputElement.addEventListener('change', function(){
alert("QUI");
  var error = 0;
  var fileLimit = 500; // In kb
  var files = inputElement.files; 
  var fileSize = files[0].size; 
  var fileSizeInKB = (fileSize/1024); // this would be in kilobytes defaults to bytes
  var fileName = inputElement.value;
  idxDot = fileName.lastIndexOf(".") + 1;
  extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
  document.getElementById("error").innerHTML = "";
  document.getElementById("filenamecheck").innerHTML = inputElement.value; 

  if (extFile=="jpg" || extFile=="pdf"){
     console.log("Type ok");
  } else {
     error = 1;
     document.getElementById("error").innerHTML = "Solo file .pdf o .jpg";
     document.getElementById("fileToUpload").value = "";
  }
  if (error == 0) {
  if(fileSizeInKB < fileLimit) {
     console.log("Size ok");
  } else {
     console.log("Size not ok");
     document.getElementById("error").innerHTML =  "Massima grandezza file: " + fileLimit + "KB";
     document.getElementById("fileToUpload").value = "";
  }
}
})
</script>

这是文件上传区

 <div class="file-uploader">
    <input id="fileToUpload" name="fileToUpload" type="file" accept=".pdf,.jpg"/>
    <label for="file-upload" class="custom-file-upload">
        <i class="fas fa-cloud-upload-alt"></i>Clicca per scegliere il file     
          <span name="filenamecheck" id="filenamecheck">test</span>

    </label>
    <p id="error" style="color: #c00000"></p>
</div>

有人可以帮助我吗？

更新：正确的 URL 是https://www.mamafrica.it/26964-2/

更新解决 我找到了解决我的问题的方法！！第一次，我在表单标签的末尾插入了 javascript 代码，并且刷新只对表单标签内的元素起作用。使用 wordpress 钩子（在 function.php 中），我在输入标签之后立即插入了 javascrip 代码，在表单标签内，这样，表单刷新，也重新加载了 javascript。谢谢你们！

问候， 马可

4

2 回答 2

1

更新我找到了解决我的问题的方法！！第一次，我在表单标签的末尾插入了 javascript 代码，并且刷新只对表单标签内的元素起作用。使用 wordpress 钩子（在 function.php 中），我在输入标签之后立即插入了 javascrip 代码，在表单标签内，这样，表单刷新，也重新加载了 javascript。

谢谢你们！

于 2020-03-31T07:22:34.767 回答
0

可能是您正在使用：
inputElement.addEventListener

这可能只触发一次。

您可能会以简单的形式使用以下内容：
onSubmit="return MyFunctionName"

多年来，它一直用于表单验证。

我希望这会有所帮助，拉蒙

于 2020-03-30T16:35:51.817 回答