简单的前端加PHP通过AJAX异步多文件上传(依赖HTML5)

首先强调，前端部分需要依赖HTML5的部分功能，代码上依赖于Jquery。

因为不是专业的讲师和写文案的，如果文章看不懂了，可以下载案例。

 

前端思路：

利用文件上传的框作为储存器，其他按钮或标签触发这个上传框就行。

为什么不直接用input框，因为input框的样式太难设置了，放弃。

<div class="uploadForm">
    <!-- 上传文件触发器 -->
    <a class="uploadClick">上传照片/视频</a>
    <!-- 上传文件储存器 -->
    <input class="uploadInput" type="file" multiple accept="image/*,video/mp4" />
</div>

JavaScript需要给按钮写触发。

//上传文件触发器 点击事件
$(".uploadClick").click(function () {
    $(".uploadInput").click();
});
//上传文件储存器 值改变事件
$(".uploadInput").change(function () {
    //这个是一个全局变量 初始化全局变量值为0
    successNumber = 0;
    //声明文件列表 文件列表的值来源于上传文件框
    var fileList = $(".uploadInput").get(0).files;
    //判断文件列表是否不为空
    if (fileList.length > 0) {
        //文件框异步上传文件 下面有这个方法的详解
        analysisToFilesFoInput(0);
    }
});

当触发上传文件事件的时候，因为是多文件上传，所以我这里用递归的方式做。

/*
 * 文件框异步上传文件
 */
function analysisToFilesFoInput(index) {
    if (Number(index) == 0) {
        //如果是第一次进来
        //给一些遮罩层 或者什么提示之类的
        creatLoadBackground("正在上传文件，请稍等");
        ajaxToSeverOfFile($(".uploadInput").get(0).files[index], index);
    } else if (Number(index) >= $(".uploadInput").get(0).files.length) {
        //如果已经结束
        //做一些事 清除遮罩层或者提示
        clearLoadBackground();
        ajaxToSeverOfSelect();
        alert("成功上传" + successNumber + "个图片和视频");
    } else {
        var fileType = $(".uploadInput").get(0).files[index].type;
        console.log(fileType);
        fileType = fileType.substring(0, fileType.indexOf("/"));
        if (fileType == "image" || fileType == "video") {
            ajaxToSeverOfFile($(".uploadInput").get(0).files[index], index);
        }
    }
}
/*
 * Ajax去服务器上传文件
 */
function ajaxToSeverOfFile(fileObject, index) {
    //下标++
    var next = Number(index) + 1;
    //实例化FormData对象
    var formData = new FormData();
    //添加参数
    //action是后端做判断用的 uploadfile是文件内容
    formData.append("action", "upload");
    formData.append("uploadfile", fileObject);
    //更新提示
    $(".loadWord").text("正在上传第" + next + "个图片和视频");
    //执行AJAX
    $.ajax({
        url: "upload.php",
        type: "post",
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            if (data == "true") {
                //上传成功了就给提示 继续上传
                $(".loadWord").text("第" + next + "个图片和视频上传成功");
                successNumber = successNumber + 1;
                //文件框异步上传文件 因为下标在刚进方法的时候就已经更新了
                analysisToFilesFoInput(next);
            } else {
                //上传失败后给提示 停止上传
                $(".loadWord").text("第" + next + "个图片和视频上传失败");
            }
        },
        error: function () {
            $(".loadWord").text("第" + next + "个图片和视频上传异常");
        }
    });
}

后端思路：

后端就无压力了，就接收文件，判断文件是否符合规范，然后再把文件从临时处移动到目的地，最后返回是否成功就行。

//获取action参数
$action = $_POST["action"];
/*
 * 上传文件操作
 */
if ($action == "upload") {
	//判断是否有错误
    if ($_FILES["uploadfile"]["error"] > 0) {
        echo "Error: " . $_FILES["uploadfile"]["error"] . "<br />";
    } else {
        //执行上传
        try {
            //验证文件后辍名
            //这里验证只是简单的验证 在此处可以根据需求执行其他验证
            $uploadFileType = $_FILES["uploadfile"]["type"];
            $uploadFileType = explode("/", $uploadFileType);
            $uploadFileType = $uploadFileType[1];
            $uploadFileType = strtolower($uploadFileType);
            $fileType = "";
            if ($uploadFileType == "jpeg" || $uploadFileType == "jpg") {
                $fileType = "jpg";
            } else if ($uploadFileType == "png") {
                $fileType = "png";
            } else if ($uploadFileType == "gif") {
                $fileType = "gif";
            } else if ($uploadFileType == "mp4") {
                $fileType = "mp4";
            } else if ($uploadFileType == "m4a") {
                $fileType = "m4a";
            } else if ($uploadFileType == "quicktime") {
                $fileType = "mov";
            } else {
                $fileType = $uploadFileType;
            }
            //设置文件名称
            $fileName = rand("111111111", "999999999") . time();
            $filePath = $fileName . "." . $fileType;
            //把上传的临时文件移动到上传文件夹内
            move_uploaded_file($_FILES["uploadfile"]["tmp_name"], "upload/" . $filePath);
            //没有异常的完成后就返回true
            echo "true";
        }
        catch(Exception $e) {
            //有任何异常都返回false
            echo "false";
        }
    }
}

 

都是一些基础的东西，几年前的工作状态是：既当前端的用、又当后端的使。

近几年做了运营，很多东西都忘了，有些东西是在百度上找，所以看到雷同的部分，说不定是我借鉴的人家的。

文章最顶部有案例的下载地址，可以下载到本地试试，技术含量不敢谈，至少多一条思路吧。