首页 > 代码库 > input file图片上传预览
input file图片上传预览
两种方法，方法一：
js代码：
//头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $file[0]; var windowURL = window.URL || window.webkitURL; var dataURL; var $img = $("#ImgPr"); if(fileObj && fileObj.files && fileObj.files[0]){ dataURL = windowURL.createObjectURL(fileObj.files[0]); $img.attr(‘src‘,dataURL); }else{ dataURL = $file.val(); var imgObj = document.getElementById("ImgPr"); imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = http://www.mamicode.com/dataURL;>
html：
<div class="picbtn"><img id="ImgPr" src="http://www.mamicode.com/images/neik.png"</div><a class="chooseimg" href="http://www.mamicode.com/#"><input type="file" id="up">从手机相册中选择</a>
原生js实现，方法二：
js代码：
function $$(obj) { return document.getElementById(obj);}function upload(f){ var str = ""; for(var i=0;i<f.length;i++){ var reader = new FileReader(); reader.readAsDataURL(f[i]); reader.onload = function(e){ str+="<img src=http://www.mamicode.com/‘"+e.target.result+"‘/>"; $$("dd").innerHTML = str; } }}
html：
<input id="load" type="file" onchange="upload(this.files)" multiple/><div id="dd"></div>
input file图片上传预览
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。