两种方法,方法一:

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 = dataURL; }
});

 

html:

<div class="picbtn"><img id="ImgPr" src="data:images/neik.png"</div>
<a class="chooseimg" href="#"><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='"+e.target.result+"'/>";
$$("dd").innerHTML = str;
}
} }

  

html:

<input id="load" type="file" onchange="upload(this.files)" multiple/>
<div id="dd"></div>

  

最新文章

  1. 比较好用的php函数
  2. XmlWriter/XmlReader示例代码
  3. Java 线程的状态
  4. GUI编程(一)-----概述
  5. .net 调用Oracle.Data.Access 组件提供的用于批量操作的方法
  6. eclipse中安装svn插件实现版本控制
  7. linux+nginx+mysql+php
  8. iOS6和iOS7适应代码(6) —— NSLocalizedString
  9. Spring Security(11)——匿名认证
  10. 这是您一直期待的所有iOS 11功能的屏幕截图
  11. PBRT笔记(10)——体积散射
  12. ASP.NET Core 2.2 迁移至 3.0 备忘录
  13. Android Studio 活动的生命周期
  14. bat处理复制文件
  15. vue路由3:子路由
  16. Linux 字符设备驱动及一些简单的Linux知识
  17. day5——Java 实现导出excel表 POI(转)
  18. Linux下XordDos木马的清除
  19. 好久没玩laravel了,5.6玩下(三)
  20. echarts中datazoom相关配置

热门文章

  1. hdu_5274_Dylans loves tree(树剖)
  2. openwrt ramips随记
  3. iOS:UIWebView scrollView 的分页滑动问题
  4. lepus bug
  5. ENC28j60以太网芯片驱动程序简介
  6. CSS中常见中文字体的英文名称(Microsoft YaHei,SimHei)
  7. 用For Each语句对Session.Contents树组进行遍历
  8. 【Tomcat】Tomcat配置之请求字符串编码
  9. WPF InkCanvas 画图 基础使用教程
  10. CodeForces 709B Checkpoints 模拟