php+jQuery.uploadify实现文件上传教程

下面是详细的讲解“php+jQuery.uploadify实现文件上传教程”的完整攻略。

一、前言

文件上传功能在很多网站中都非常常见。本文将会教你使用php和jQuery.uploadify插件来实现上传文件的功能，其中php将作为后端语言，jQuery.uploadify插件将用于前端。

二、环境准备

在开始编写代码之前，需要确保你已经正确的搭建好了php和jQuery.uploadify插件的环境，如果没有的话可以去官网下载安装。

三、实现思路

文件上传的过程主要分为两个阶段，即文件上传到服务器上和在服务器上进行处理。

在文件上传到服务器上的过程中，我们使用了jQuery.uploadify插件来进行文件上传，并使用ajax向服务器发送上传请求。

在服务器上进行文件处理的过程中，我们需要使用php来处理文件上传，并对上传的文件进行一些处理和验证，比如文件格式、大小等等。

四、文件上传示例

以下是一个简单的示例，可以帮助你快速了解如何使用php和jQuery.uploadify插件来实现文件上传功能。

1. HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>文件上传Demo</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.uploadify.min.js"></script>
    <link rel="stylesheet" type="text/css" href="uploadify.css">
    <script type="text/javascript">
    $(function () {
        $('#upload_btn').uploadify({
            'swf': 'uploadify.swf',
            'uploader': 'upload.php',
            'queueID': 'file_queue',
            'buttonText': '选择文件',
            'multi': true,
            'fileSizeLimit': '2MB',
            'fileTypeExts': '*.jpg;*.png;*.gif',
            'onUploadSuccess': function (file, data, response) {
                alert('上传成功');
            }
        });
    });
    </script>
</head>
<body>
    <div style="text-align:center;">
        <input id="upload_btn" name="upload_btn" type="file" />
        <div id="file_queue"></div>
    </div>
</body>
</html>

2. PHP代码

<?php
header("Content-type:text/html;charset=utf-8");

if ($_FILES['Filedata']['error'] > 0) {
    echo $_FILES['Filedata']['error'];
    exit();
}

$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = './uploads/';
$newFileName = md5(time() . rand(100, 999)) . '.' . pathinfo($_FILES['Filedata']['name'], PATHINFO_EXTENSION);
$targetFile = $targetPath . $newFileName;

if (move_uploaded_file($tempFile, $targetFile)) {
    echo '1';
} else {
    echo '0';
}
?>

在以上代码中，我们采用了一个简单的判断方式，来判断文件上传是否成功。如果上传成功，我们将会在后台创建一个uploads文件夹，并将上传的文件移动到该文件夹下，并通过md5和rand函数生成一个新的文件名，并将该文件名作为上传成功的回调函数返回值返回给前端。

五、多文件上传示例

以上示例仅仅支持单文件上传，如果需要实现多文件上传功能，我们可以在jquery.uploadify插件中添加'multi'配置选项以实现多文件上传的功能。以下是两个简单的示例，你可以快速了解如何实现多文件上传。

1. HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>多文件上传Demo</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.uploadify.min.js"></script>
    <link rel="stylesheet" type="text/css" href="uploadify.css">
    <script type="text/javascript">
    $(function () {
        $('#upload_btn').uploadify({
            'swf': 'uploadify.swf',
            'uploader': 'upload.php',
            'queueID': 'file_queue',
            'buttonText': '选择文件',
            'multi': true,
            'fileSizeLimit': '2MB',
            'fileTypeExts': '*.jpg;*.png;*.gif',
            'onUploadSuccess': function (file, data, response) {
                alert('上传成功');
            }
        });
    });
    </script>
</head>
<body>
    <div style="text-align:center;">
        <input id="upload_btn" name="upload_btn" type="file" />
        <div id="file_queue"></div>
    </div>
</body>
</html>

2. PHP代码

<?php
header("Content-type:text/html;charset=utf-8");

if ($_FILES['Filedata']['error'] > 0) {
    echo $_FILES['Filedata']['error'];
    exit();
}

$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = './uploads/';
$newFileName = md5(time() . rand(100, 999)) . '.' . pathinfo($_FILES['Filedata']['name'], PATHINFO_EXTENSION);
$targetFile = $targetPath . $newFileName;

if (move_uploaded_file($tempFile, $targetFile)) {
    echo '1';
} else {
    echo '0';
}
?>

在以上PHP代码中，多文件上传和单文件上传唯一的区别就是我们可以对上传的文件进行循环处理，将每一个文件移动到一个新的文件夹下供使用。

以上就是“php+jQuery.uploadify实现文件上传教程”的完整攻略了，希望能对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：php+jQuery.uploadify实现文件上传教程 - Python技术站

php+jQuery.uploadify实现文件上传教程

一、前言

二、环境准备

三、实现思路

四、文件上传示例

1. HTML代码

2. PHP代码

五、多文件上传示例

1. HTML代码

2. PHP代码

相关文章