Question

我正在寻找一个简单易用的客户端上传验证器。它不需要处理上传本身（POST和服务器端脚本正在处理这个问题。）

我已经研究了一下，很明显单靠js无法完成。其他解决方案建议使用activeX，它似乎在不同的浏览器上有不一致的结果。

Flash很受欢迎，但UPLOADIFY和SWFUploader等Flash解决方案似乎与ajax上传器和进度条捆绑在一起。这可能会破坏我现有的表单和服务器端处理脚本，所以我只是在寻找一种简单的机制来验证文件模糊或文件输入的更改，或提交表单。但我不希望验证器除了提供验证之外还做任何其他事情，以便我现有的上传脚本继续像现在一样工作。

这要求太多了吗？！

感谢。

Answer 1

这必须是第一个工作代码在chrome safari firefox歌剧中测试，当然还有探险家。客户端图像（类型/大小）上载验证

<form><fieldset><legend>Image upload</legend>
<input type=file onchange="getImg(this,500,'jpeg|png')">
</fieldset>
</form>

<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> 

</body>
</html>

Answer 2

<form><fieldset><legend>Image upload</legend> 
<input type=file onchange="getImg(this,500,'jpeg|png')"> 
</fieldset> 
</form> 

<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>

客户端文件上传验证（无上传）

2 个答案: