<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .photo { width: 100px; height: 100px; float: left; margin-right: 10px; } .pic{ margin-left: 120px; } .pic .photo img { width: 100%; height: 100%; } input[type="file"] { opacity: 0; } .container img.select { position: fixed; left: 0; top: 20px; } </style> </head>
<div class="container"> <input type="file" id="file_input" multiple/> <img class="select" src="../img/upload_icon.png" /> <div class="pic"> </div> </div>
<script type="text/javascript"> window.onload = function() { var input = document.getElementById("file_input"); var result, div; if(typeof FileReader === 'undefined') { result.innerHTML = "抱歉,你的浏览器不支持 FileReader"; input.setAttribute('disabled', 'disabled'); } else { input.addEventListener('change', readFile, false); } function readFile() { for(var i = 0; i < this.files.length; i++) { if(!input['value'].match(/.jpg|.gif|.png|.bmp/i)) { //判断上传文件格式 alert("上传的图片格式不正确,请重新选择"); } var reader = new FileReader(); reader.readAsDataURL(this.files[i]); reader.onload = function(e) { result = '<img src="' + this.result + '" alt=""/>'; div = document.createElement('div'); div.className = 'photo' div.innerHTML = result; document.querySelector('.pic').appendChild(div); //插入dom树 } } } } // var select = document.querySelector(".container .select"); select.onclick = function() { $("#file_input").trigger("click"); } } </script>