语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>好得很CMS(HDHCMS)多图选择自增并生成BASE64编码

好得很CMS(HDHCMS)多图选择自增并生成BASE64编码

2019/9/7 21:40:25 0人评论 159次 作者:admin

为解决新浏览器下上传图片预览与统一上传的功能,好得很CMS(HDHCMS)根据系统开发的实际情况,开发了多图选择自增并生成BASE64编码,希望能帮到大家。…

效果预览:
 

原码如下:
   <!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>好得很CMS(HDHCMS)多图选择自增并生成BASE64编码</title>

</head>

<body>

<!--src可以指定一个默认的背景图片-->

<input type="hidden" value="0" name="HdhPhotosCount" id="HdhPhotosCount">

<input type="file" name="HdhPhotosAdd" id="HdhPhotosAdd" onchange="HdhCmsPhonesSelectFile('HdhPhotosAdd');" style="display:none">

<input type="button" value="新增一张" onclick="document.getElementById('HdhPhotosAdd').click()">

<div id="HdhPhotosList">

</div>

<script>

function HdhCmsPhonesSelectFile(b) {

    var oFile = document.getElementById(b).files[0];

    // 过滤图片文件的类型

    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;

    if (!rFilter.test(oFile.type)) {

        alert('非图片类型不可上传!');

        return;

    }

    // 建立 HTML5 FileReader 对象

    var oReader = new FileReader();

    oReader.onload = function(e) {

//新增影集  开始

var HdhPhotosCount=document.getElementById("HdhPhotosCount").value;

HdhPhotosCount++;

var strBack="";

strBack="<div class='hdhyjtpk' id='hdhyjtpk"+HdhPhotosCount+"'>";

strBack+="<img id='HdhPhones"+HdhPhotosCount+"' class='tp' src='"+e.target.result+"'>";

strBack+="<input type='text' class='ms' ploceholder='输入描述' id='HdhPhones"+HdhPhotosCount+"m' value='"+HdhPhotosCount+"'/>"; //描述

strBack+="<a class='a' onclick='HdhCmsPhonesDeleteFile("+HdhPhotosCount+");'>删除图片</a>";

strBack+="<input type='hidden' id='HdhPhones"+HdhPhotosCount+"t' value='"+e.target.result+"'/>";

strBack+="</div>";

document.getElementById("HdhPhotosCount").value=HdhPhotosCount;

document.getElementById("HdhPhotosList").innerHTML+=strBack;

//新增影集  结束

    };

    // 读取所选文件的数据

    oReader.readAsDataURL(oFile);

}

function HdhCmsPhonesDeleteFile(a){

var id="hdhyjtpk"+a;

document.getElementById(id).remove();

}

</script>

<style type="text/css">

.hdhyjtpk{float:left;width:80px;height:120px;margin:5px 0 0 5px;font-size:12px;}

.hdhyjtpk>.tp{width: 80px;height:100px;max-height: 100px;max-width: 80px;}

.hdhyjtpk>.ms{width: 78px;height:18px;border:1px solid #999;}

.hdhyjtpk>.a{float:left;width: 100%;height:20px;text-align:center;margin:2px auto auto 0;cursor:pointer;}

</style>

</body>

</html>


CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【广东省 广州市】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮