温馨提示×

JavaScript Uploadify文件上传实例

小云
100
2023-08-17 13:48:55
栏目: 编程语言

以下是一个使用JavaScript和Uploadify插件实现文件上传的示例代码:

<!DOCTYPE html>

<html>

<head>

    <title>Uploadify 文件上传示例</title>

    <!-- 引入jQuery库 -->

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <!-- 引入Uploadify插件 -->

    <link rel="stylesheet" type="text/css" href="uploadify.css">

    <script src="jquery.uploadify.min.js"></script>

</head>

<body>

    <h2>选择文件并上传</h2>

    <input type="file" name="file_upload" id="file_upload">

    <div id="fileQueue"></div>

    <script type="text/javascript">

        $(document).ready(function() {

            // 初始化上传插件

            $('#file_upload').uploadify({

                'swf': 'uploadify.swf', // 指定Uploadify的Flash文件路径

                'uploader': 'upload.php', // 指定服务器端处理上传的脚本文件路径

                'buttonText': '选择文件', // 上传按钮上的文字

                'fileTypeExts': '*.jpg; *.png; *.gif', // 允许上传的文件类型

                'fileSizeLimit': '10MB', // 限制每个文件的大小

                'multi': true, // 是否允许多文件上传

                'auto': true, // 是否自动上传文件

                'queueID': 'fileQueue', // 文件队列的元素ID

                'onUploadSuccess': function(file, data, response) {

                    // 上传成功时的回调函数

                    alert('文件上传成功!');

                },

                'onUploadError': function(file, errorCode, errorMsg) {

                    // 上传失败时的回调函数

                    alert('文件上传失败:' + errorMsg);

                }

            });

        });

    </script>

</body>

</html>

在上述示例中,我们引入了jQuery库和Uploadify插件,并使用uploadify()方法初始化了一个文件上传组件。其中,各个参数的意义如下:

swf: 指定Uploadify的Flash文件路径。

uploader: 指定服务器端处理上传的脚本文件路径。

buttonText: 上传按钮上的文字。

fileTypeExts: 允许上传的文件类型。

fileSizeLimit: 限制每个文件的大小。

multi: 是否允许多文件上传。

auto: 是否自动上传文件。

queueID: 文件队列的元素ID。

onUploadSuccess: 上传成功时的回调函数。

onUploadError: 上传失败时的回调函数。

你需要将以上代码保存为一个HTML文件,并确保正确引入了Uploadify的JS和CSS文件。另外,你还需要编写一个服务器端的处理上传的脚本文件(例如upload.php),用于接收并保存上传的文件。

0