语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>前端技术 >>HTML5 >>利用HTML5的FileReader对象批量上传图片

利用HTML5的FileReader对象批量上传图片

2019/3/7 19:59:32 0人评论 164次 作者:admin

利用HTML5的FileReader对象批量上传图片,FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。…

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

</style>

</head>

<body>

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

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

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

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

<div id="HdhPhotosList">

</div>

<script>

function HdhCmsSelectFile(a, 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)) {

        document.getElementById('error').style.display = 'block';

        return;

    }

    // 建立 HTML5 FileReader 对象

    var oReader = new FileReader();

    oReader.onload = function(e) {

//新增影集  开始

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

HdhPhotosCount++;

var strBack="";

strBack="<img id='HdhPhones"+HdhPhotosCount+"' style='width: 120px;height:140px;max-height: 140px;max-width: 120px;' src='"+e.target.result+"'><br>";

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

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

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

//新增影集  结束

    };

    // 读取所选文件的数据

    oReader.readAsDataURL(oFile);

}

</script>


</body>

</html>


相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-4 http://www.yuyanba.com
分享按钮