基于FileReader自写base64多图片上传特效代码

基于FileReader自写base64多图片上传特效代码

基于FileReader自写base64多图片上传代码,通过不同的选择器class应用不同的样式,支持单张图片和多张图片上传控制,点击预选图片可以进行删除,提供两种demo案例,一种带弹层,一种不带弹层,提供后台PHP程序处理案例。

使用方法
在页面引入相关JS代码

1
2
<script  type="text/javascript" src="./js/jquery.min.js"></script>
<script  type="text/javascript" src="./js/main.js"></script>

HTML结构

1
2
3
4
5
6
7
8
9
10
11
<div id="zhl_admin_box" class="zhl_admin_update_more"> <!-- 在这里更改class选择器名称,显示不同的样式-->
<div id="zhl_admin_update">
    <input type="file" id="zhl_admin_file" hidefocus   style="display:none" multiple="multiple">
    <span id="zhl_admin_imgs">
       
    </span>
    <img src="./img/photo_icon.jpg" id="zhl_admin_img" onclick="zhl_admin_file.click()" />
    <div id="zhl_admin_update_btn" >上传</div>
    <span id="zhl_update_hint">最多传10</span>
</div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论