修复javacode显示错误消息文件上传

Question

我有用户的表单上载图像，我想在上传之前验证该图像。所以我在网上找到了这个脚本，它的验证工作正常，但它不显示错误信息。因为我不知道如何声明要显示的错误消息的元素。我只学习javascript，它通常使用document.getElementById("demo").innerHTML = "Hello JavaScript";。但是这个代码是如此先进，我不知道如何解决它。

这里是我的表单中输入文件。我在第11行中添加了<span class='error-message'></span>。我希望在此span元素中显示错误消息。

<?php 
for($i=0;$i<6;$i++){ 
echo "<div style='padding-left:0' class=\"fileinput fileinput-new col-xs-12 col-sm-6 col-md-4\" data-provides=\"fileinput\"> 
     <div class=\"fileinput-new thumbnail\" style=\"width: 266px; height: 220px;\"> 
      <img src=\"../images/default_image.png\" alt=\"chọn ảnh\"> 
     </div> 
    <div class=\"fileinput-preview fileinput-exists thumbnail\" style=\"width: 277px; height: 220px\"></div> 
     <div> 
      <span class=\"btn btn-default btn-file\"><span class=\"fileinput-new\">Select image</span><span class=\"fileinput-exists\">Change</span><input type=\"file\" onchange=\"getImg(this,500,'jpeg|png')\" id=\"file$i\" name=\"file[]\"></span> 
      <a href=\"#\" class=\"btn btn-default fileinput-exists\" data-dismiss=\"fileinput\">Remove</a> 
      <span class='error-message'></span> 
     </div> 
    </div>"; 
} 
?> 

这里是Java脚本代码：

<script> 
function getImg(input,max,accepted){ 
var upImg=new Image(),test,size,msg=input.form; 
msg=msg.elements[0].children[0]; 
return input.files?validate(): 
(upImg.src=input.value,upImg.onerror=upImg.onload=validate); 
    "author: b.b. Troy III p.a.e"; 
function validate(){ 
    test=(input.files?input.files[0]:upImg); 
    size=(test.size||test.fileSize)/1024; 
    mime=(test.type||test.mimeType); 

mime.match(RegExp(accepted,'i'))? 
size>max?(input.form.reset(),msg.innerHTML=max+"KB Exceeded!"): 
msg.innerHTML="Upload ready...":  
(input.form.reset(),msg.innerHTML=accepted+" file type(s) only!") 
} 
} 
</script> 

这是笔者这个脚本的工作演示：JSFIDDLE。我如何在我的情况下应用这个？

Answer 1

最简单的方法是：

在你html的更换：

<span class='error-message'></span> 

有：

而且在你JS更换：

msg=msg.elements[0].children[0]; 

有：

var msg=document.getElementById('error-message');