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

最新推荐文章于 2021-10-10 11:52:29 发布

阿小狸

最新推荐文章于 2021-10-10 11:52:29 发布

阅读量663

点赞数

文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/cr4blm123/article/details/97525737

版权

首先强调，前端部分需要依赖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;
    //声明文件