【亲测免费】 jQuery Upload File 插件使用教程

2026-01-17 09:02:25作者：乔或婵

jQuery Upload File plugin provides Multiple file Uploads with progress bar.Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

项目地址：https://gitcode.com/gh_mirrors/jq/jquery-upload-file

1. 项目的目录结构及介绍

jquery-upload-file/
├── css/
│   └── uploadfile.css
├── img/
│   └── loading.gif
├── js/
│   ├── jquery.uploadfile.js
│   └── jquery.uploadfile.min.js
├── README.md
└── index.html

css/: 包含上传文件插件的样式文件 uploadfile.css。
img/: 包含上传过程中显示的加载动画图片 loading.gif。
js/: 包含上传文件插件的主要脚本文件 jquery.uploadfile.js 和压缩版本 jquery.uploadfile.min.js。
README.md: 项目的说明文档。
index.html: 项目的示例页面。

2. 项目的启动文件介绍

项目的启动文件是 index.html，它包含了插件的基本使用示例。以下是 index.html 的关键部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Upload File Demo</title>
    <link rel="stylesheet" href="css/uploadfile.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/jquery.uploadfile.js"></script>
</head>
<body>
    <div id="fileuploader">Upload</div>
    <script>
        $(document).ready(function() {
            $("#fileuploader").uploadFile({
                url:"YOUR_SERVER_URL",
                fileName:"myfile"
            });
        });
    </script>
</body>
</html>

引入样式和脚本: uploadfile.css 和 jquery.uploadfile.js 被引入到页面中。
初始化插件: 在 $(document).ready 中，通过 $("#fileuploader").uploadFile 初始化上传文件插件。

3. 项目的配置文件介绍

插件的配置主要在 jquery.uploadfile.js 中完成。以下是一些常用的配置选项：

$("#fileuploader").uploadFile({
    url: "YOUR_SERVER_URL", // 服务器上传地址
    fileName: "myfile", // 文件名参数
    multiple: true, // 是否允许多文件上传
    maxFileSize: 1024 * 1024, // 最大文件大小（字节）
    allowedTypes: "jpg,png,gif", // 允许的文件类型
    showStatusAfterSuccess: true, // 上传成功后显示状态
    onSubmit: function(files) {
        // 上传前回调函数
    },
    onSuccess: function(files, response) {
        // 上传成功回调函数
    },
    onError: function(files, status, errMsg) {
        // 上传失败回调函数
    }
});

url: 指定文件上传的服务器地址。
fileName: 上传文件的参数名。
multiple: 是否允许多文件上传。
maxFileSize: 允许上传的最大文件大小。
allowedTypes: 允许上传的文件类型。
showStatusAfterSuccess: 上传成功后是否显示状态。
onSubmit: 上传前的回调函数。
onSuccess: 上传成功的回调函数。
onError: 上传失败的回调函数。