jQuery File Upload 使用教程

费琦栩

于 2024-08-21 08:34:53 发布

阅读量773

点赞数 16

本文链接：https://blog.csdn.net/gitblog_00163/article/details/141375247

版权

jQuery File Upload 使用教程

jQueryFileUploadA simple method for handling file uploads with jQuery项目地址:https://gitcode.com/gh_mirrors/jq/jQueryFileUpload

项目介绍

jQuery File Upload 是一个基于 jQuery 的文件上传插件，支持多文件上传、拖放上传、文件类型限制、上传进度条等功能。该项目由 Abban 开发并维护，旨在提供一个简单易用的文件上传解决方案。

项目快速启动

环境准备

确保你已经安装了 Node.js 和 npm。

克隆项目仓库：

git clone https://github.com/Abban/jQueryFileUpload.git
cd jQueryFileUpload

安装依赖

npm install

运行项目

node server.js

前端代码示例

在你的 HTML 文件中引入必要的文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery File Upload 示例</title>
    <link rel="stylesheet" href="css/jquery.fileupload.css">
</head>
<body>
    <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/jquery.ui.widget.js"></script>
    <script src="js/jquery.fileupload.js"></script>
    <script>
        $(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                done: function (e, data) {
                    $.each(data.result, function (index, file) {
                        $('<p/>').text(file.name).appendTo(document.body);
                    });
                }
            });
        });
    </script>
</body>
</html>