jquery控制上传文件格式、大小以及图片预览功能

使用jQuery限制上传图片大小与格式

最新推荐文章于 2020-12-22 16:11:33 发布

转载最新推荐文章于 2020-12-22 16:11:33 发布 · 460 阅读

图片处理专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的功能，该功能允许用户仅选择特定格式（如jpg、png、gif）且大小不超过5MB的图片进行上传。通过监听文件输入变化，验证所选文件是否符合要求，并预览图片。

前言：

$("#picture").change(function () {
    var s = $('#picture').val();
    var start = s.indexOf(".") + 1;
    var name = s.substring(start, s.length).toLowerCase();
    if (name != "jpg" && name != "png" && name != "gif") {
        alert("图片格式必须为jpg、png、gif中的一种");
        $("[value='上传']").attr("disabled", true);
        return;
    }
    if (this.files[0].size / 1024 / 1024 > 5) {
        alert("图片不能超过5M");
        $("[value='上传']").attr("disabled", true);
        return;
    }
    var objUrl = getObjectURL(this.files[0]);
    if (objUrl) {
        $("#img0").attr("src", objUrl);
    }
    $("[value='上传']").attr("disabled", false);
});
 
//获得file按钮选取文件的路径
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

原文：https://so.youkuaiyun.com/so/search/s.do?q=jq%E4%B8%8A%E4%BC%A0%E9%99%90%E5%88%B6%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F&t=&o=&s=&l=