两种方法,方法一:

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>

  

input file图片上传预览的更多相关文章

  1. input file图片上传预览效果

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

  2. html,图片上传预览,input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  3. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  4. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  5. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  6. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  7. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. ASP.NET工作笔记之一:图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  9. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. 其他应用和技巧-用try和catch来让程序更友好

    ---------------------------- <script type="text/javascript">                    //进行 ...

  2. Go-new和make

    new返回指向struct的指针,new仅分配内存,而不对对象的值进行初始化 make返回到strcut的对象,而不是指针,只能创建map,slice,channel对象 make([]string, ...

  3. 在CentOS 7下ISCSI和多路径部署文档【转】

    部署环境 设备:MD3860i, R630, S4820T(生产网络), N2024(管理网络) 操作系统:Centos 7 默认管理口的地址:A控192.168.129.101, B 控192.16 ...

  4. 使用onclick跳转到其他页面。使用button跳转到指定url

    1. onclick="javascript:window.location.href='aa.htm'" 2.  onclick="location='URL'&quo ...

  5. [分享]Host文件的原理解释及应用说明

    Host文件的原理解释及应用说明   Host文件位置及打开方式:   Window系统中有个Hosts文件(没有后缀名), Windows 98系统下该文件在Windows目录,在Windows 2 ...

  6. C# 垃圾回收机制(转)

    摘要:今天我们漫谈C#中的垃圾回收机制,本文将从垃圾回收机制的原理讲起,希望对大家有所帮助. GC的前世与今生 虽然本文是以.NET作为目标来讲述GC,但是GC的概念并非才诞生不久.早在1958年,由 ...

  7. Parade

    Parade time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  8. iOS xcode工程了解

    一个xcode工程默认是在一个主线程的,有需要可以创建分线程 判断是否是主线程: NSThread *thread1=[NSThread currentThread]; if ([red isMain ...

  9. 在Android studio中进行NDK开发

     在Android studio中进行NDK开发  分类: Android平台 软硬件环境 ubuntu kylin 14.04 红米note增强版 Android studio 0.8.6 ndk ...

  10. oracle10g遇到ORA-16038日志无法归档问题

    SQL> shutdown immediate ORA-01109: 数据库未打开 已经卸载数据库. ORACLE 例程已经关闭. SQL> startup ORACLE 例程已经启动. ...