HDHCMS多图选择自增并生成BASE64编码

效果预览：
 

原码如下：

<table>

<tr><td width="10"></td><td ><b>批量上传影集：</b></td><td align="left">

            <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="新增一张" class="hdhcmsPhotosadd" onclick="document.getElementById('HdhPhotosAdd').click()">

            <div id="HdhPhotosList">

            </div>

            </td><td width="10"></td></tr>

</table>

<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' name='HdhPhones" + HdhPhotosCount + "m' value='" + HdhPhotosCount + "'/>"; //描述

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

        strBack += "<input type='hidden' id='HdhPhones" + HdhPhotosCount + "t' name='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;

    if (isIE() || isIE11()) {

        document.getElementById(id).removeNode(true);

    } else {

        document.getElementById(id).remove();

    }

}

///新增资料时批量上传影集-------------结束

</script>

查看更多关于HDHCMS多图选择自增并生成BASE64编码的详细内容...