java - 修复 java 代码以显示文件上传错误消息

Question

我有一个供用户上传图像的表单，我想在上传之前验证该图像。所以我在互联网上找到了这个脚本，它的验证工作正常，但它不显示错误消息。因为我不知道如何声明要显示错误消息的元素。我刚学javascript，一般用document.getElementById("demo").innerHTML = "Hello JavaScript"; 。但这段代码太先进了，我不知道如何修复它。

这是我表单中的文件输入。我已添加<span class='error-message'></span>在第 11 行。我希望在此 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>

与:

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

在你的 JS 中替换:

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

与:

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