客户端文件上传验证（不上传）答案

【问题标题】：client side file upload validation (no upload)客户端文件上传验证（不上传）
【发布时间】：2011-02-15 22:28:57
【问题描述】：

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

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

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

要求太多了吗？！

谢谢。

【问题讨论】：

标签： flash file upload validation

【解决方案1】：

这必须是第一个工作代码在 chrome safari firefox Opera 上进行了测试，当然还有 explorer。客户端图像（类型/大小）上传验证

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

【讨论】：

【解决方案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>

【讨论】：

有什么不明白的地方吗？