限制上传文件大小和格式的 jQuery 插件实例

在开发前端应用程序时，我们经常需要允许用户上传文件。但是，为了保护服务器和应用程序不受恶意行为的攻击，我们需要对上传文件进行一些限制，例如文件大小和格式。在本文中，我们将介绍如何使用 jQuery 插件来实现这种限制。

文件大小限制

通常情况下，我们希望用户上传的文件不要太大以避免占据过多的存储空间或者上传过程过长。以下是一个简单的示例代码，该代码使用 jQuery 和 Bootstrap 来创建一个可以上传文件的表单，并限制了上传文件的最大大小为 1 MB：

--------- -----
------
------
    -------------------
    ----- ---------------- ---------------------------------------------------------------------------------------
-------
------
    ---- ------------------
        -------------
        ----- ---------------- ------------- ------------------------------
            ---- -------------
                ------ ---------- -------------------------------
                ------ ----------- -------------------- --------- ----------- ------------------------ ---------
                ------ -------------------------- - -----------
            ------
            ------- ------------- ---------- ------------------------
        -------
    ------
    ------- ----------------------------------------------------------------------------
    --------
        ---------------------------- -
            ----------------------- ---------- -
                -- ------------------- - ---- - ----- -
                    ---------------- - -- -------
                    ---------- - ---
                -
            ---
        ---
    ---------
-------
-------

在上面的代码中，我们首先使用 Bootstrap 创建一个简单的表单。我们添加了一个 required 属性以确保用户必须选择一个文件才能上传。然后，我们使用 jQuery 监听文件选择的事件并检查文件大小是否超出了限制。如果是，则弹出一个提示框并清空文件输入框。

文件格式限制

在某些情况下，我们不希望用户上传任意类型的文件。例如，在上传图片时，我们只希望用户上传 JPG、JPEG 或 PNG 格式的文件。以下是一个示例代码，该代码可以限制上传的文件格式：

--------- -----
------
------
    -------------------
    ----- ---------------- ---------------------------------------------------------------------------------------
-------
------
    ---- ------------------
        -------------
        ----- ---------------- ------------- ------------------------------
            ---- -------------
                ------ ---------- -------------------------------
                ------ ----------- -------------------- --------- ----------- ------------------------ ---------
                ------ ---------------------- -------- - --- --------------
            ------
            ------- ------------- ---------- ------------------------
        -------
    ------
    ------- ----------------------------------------------------------------------------
    --------
        ---------------------------- -
            ----------------------- ---------- -
                --- -------- - -------------------
                -- --------- -- ------------ -- -------- -- ----------- -- -------- -- ------------ -
                    ---------- -------- - --- ---------
                    ---------- - ---
                -
            ---
        ---
    ---------
-------
-------

在上面的代码中，我们

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/277