您的位置：首页 > 移动开发 > 微信开发

模仿微信的多图片上传功能

2016-01-24 22:23 507 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="UTF-8">
<title>upload-more-pic</title>
<style>
.fl{float: left}
.show-images-box .pics{width: 100px;height: 100px;float: left;}
.upload-btn-box{width: 100px;height: 100px;position: relative;}
.upload-btn-box input.file{width: 100%;height: 100%;opacity: 0;position: absolute;top: 0px;left: 0px;}
</style>
</head>
<body>
<div>
<div class="show-images-box fl" id="show-images-box">
<div class="upload-btn-box fl" id="upload-btn-box"><img src="images/addpic.png" width="100"><input type="file" class="file" id="file" multiple></div>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var picArray = new Array();
$("#file").on("change", function() {
for(var i=0;i<document.getElementById("file").files.length;i++){
file=document.getElementById("file").files[i];
if(file){
picArray.push(file.name)
}
if(!/image\/\w+/.test(file.type)){
alert("对不起，不要上传非图片文件，请重新选择图片");
}else{
var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function() {
var uploadBtnBox=document.getElementById("upload-btn-box");
var img=document.createElement("img");
img.className="pics";
img.id=file.name;
img.src=this.result;
uploadBtnBox.parentNode.insertBefore(img,uploadBtnBox);
}
}
}
console.log(picArray.toLocaleString());
});
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航