图片上传（angular）

最新推荐文章于 2021-01-13 12:16:35 发布

SpringYangC

最新推荐文章于 2021-01-13 12:16:35 发布

阅读量251

点赞数

分类专栏： AngularJs JS HTML5

本文链接：https://blog.csdn.net/SpringYangC/article/details/49250639

版权

AngularJs 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JS HTML5

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
window.URL = window.URL || window.webkitURL;
// function onchange1 () {
var _num = 0 , lvYouSrcList = [];
var onchange1 = function(obj){
var files = obj.files;//获得文件流
var oFile;
var reader = new FileReader();
for (var i = 0; i<files.length;i++){
oFile = files[i];
_num = _num + 1;
if(_num>5){
alert("最多上传6张照片");
return
}
reader.readAsDataURL(oFile);
}
var _img = "<img style='width:60px;height:60px' src="+ URL.createObjectURL(oFile)+"> ";
lvYouSrcList.push(URL.createObjectURL(oFile));
// reader.readAsDataURL(oFile);
console.log( document.getElementById("fileList"));
var appDoc = angular.element(document.getElementById("fileList"));
appDoc.append(_img);
reader.onload = function(e){
stringToHex(this.result)
};
};
var stringToHex = function(str){
var val="";
for(var i = 0; i < str.length; i++){
if(val == "")
val = str.charCodeAt(i).toString(16);
else
val += "," + str.charCodeAt(i).toString(16);
}
return val;
}
</script>
</head>

<body>
<input type="file" id="fileElem" multiple accept="image/*" οnchange="onchange1(this)">
<div id="fileList">

</div>
</body>
</html>