php+ajax实现无刷新文件上传功能(ajaxuploadfile)

在网站开发过程中，文件上传是非常常见的功能，然而传统的文件上传方式需要页面刷新才能完成，用户体验不够良好。为此，可以使用ajax实现无刷新文件上传功能，提高页面的交互性和用户体验。

其中，可以使用第三方插件ajaxuploadfile来实现。

一、安装ajaxuploadfile插件

下载ajaxuploadfile插件压缩包，解压后将其中的ajaxuploadfile.js和ajaxuploadfile.php文件导入项目中。

二、使用ajaxuploadfile完成文件上传功能

1. 负责文件上传的PHP文件

首先编写处理文件上传的PHP文件。可以定义一个upload.php文件，在其中写入以下代码：

<?php 
$upload_dir = "uploads/"; //文件保存路径
if(isset($_FILES['myfile'])) {
    $tmp_name = $_FILES['myfile']['tmp_name'];
    $file_name = $_FILES['myfile']['name'];
    move_uploaded_file($tmp_name, $upload_dir.$file_name); //移动文件到指定目录
    echo "1";
}
else {
    echo "0";
}
?>

2. 页面中添加HTML元素

接着，在页面中添加一个HTML文件上传表单元素和一个隐藏域，以便后台PHP文件可以知道哪个表单对象上传了该文件。HTML代码如下：

<form id="myfileupload" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile" id="myfile"><br>
    <input type="hidden" name="action" value="myfileupload">
</form>

3. 在页面引入ajaxuploadfile.js文件

在页面中引入ajaxuploadfile.js文件，代码如下：

<script type="text/javascript" src="ajaxuploadfile.js"></script>

4. 使用ajaxuploadfile插件实现文件上传

最后，在页面中使用ajaxuploadfile插件来实现无刷新文件上传。代码如下：

$("#myfile").on("change", function(){
    $.ajaxFileUpload({
        url: 'upload.php', //处理文件上传的php文件
        secureuri: false,
        data: $("#myfileupload").serialize(),
        fileElementId: 'myfile',
        dataType: 'text',
        success: function (data, status) {
            alert("文件上传成功！");
        },
        error: function (data, status, e) {
            alert(e);
        }
    });
});

以上代码中，我们通过给文件上传表单元素增加change事件，使得当文件上传表单元素的值发生改变时，将调用ajaxuploadfile插件向服务器发起文件上传请求。当文件上传成功后，在success回调函数中给予提示。

总结

使用ajaxuploadfile插件可以很方便地实现无刷新文件上传功能，提高了用户体验和网站的功能性。需要注意的是，步骤二中PHP文件中保存文件的目录需要在服务器上赋予写入权限，否则无法保存文件。