html代码:
<div class="album-new fr"> <div class="upload-btn btn-new container"> <div id="img_d"> <img class="ksd" width="100px" height="100px" /> </div> <div style="clear: both"></div> <input type="file" name="file[]" id="file_input" οnchange="imgPreviews(this,'img_d')" multiple="multiple" /> </div> <div class="upload-img"></div> </div>
原生js代码:
<script type="text/javascript"> function imgPreviews(fileDom,id_on){ var file = fileDom.files; var imageType = /^image\//; $('.ksd').css('display','none'); for(var i=0;i<file.length;i++){ var reader = new FileReader(); reader.readAsDataURL(file[i]); reader.onload = function(e){ result = '<img src="'+this.result+'" alt=""/>'; div = document.createElement('div'); div.innerHTML = result; document.getElementById(id_on).appendChild(div); } } } function imgPreview(fileDom,id_on){ //判断是否支持FileReader if (window.FileReader) { var reader = new FileReader(); } else { alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!"); } //获取文件 var file = fileDom.files[0]; var imageType = /^image\//; //是否是图片 if (!imageType.test(file.type)) { alert("请选择图片!"); return; } //读取完成 reader.onload = function(e) { //获取图片dom var img = document.getElementById(id_on); //图片路径设置为读取的图片 img.src = e.target.result; }; reader.readAsDataURL(file); } </script>