不错的jquery上传插件jQuery File Upload 正确使用方式很全面

作者：System 时间：2024年08月16日分类：所有,jquery 字数：1599

这篇文章距离上次修改已过190天，其中的内容可能已经有所变动。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery File Upload Example</title>
    <link rel="stylesheet" href="path/to/jquery.fileupload.css">
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/jquery.ui.widget.js"></script>
    <script src="path/to/jquery.fileupload.js"></script>
    <script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
          .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
    </script>
    <style>
        #progress .progress-bar {
            transition: width 0.5s ease-in-out;
        }
    </style>
</head>
<body>
    <input id="fileupload" type="file" name="files[]" multiple>
    <div id="progress" class="progress">
        <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</body>
</html>

这个示例展示了如何使用jQuery File Upload插件来上传文件，并在上传完成后显示文件名。同时，它还包括了进度条的实时更新，展示了如何使用jQuery和CSS来实现用户界面的更新。

不错的jquery上传插件jQuery File Upload 正确使用方式很全面

评论已关闭

推荐阅读