两种方法,方法一:

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. SSH-KeyGen 的用法

    假设 A 为客户机器,B为目标机: 要达到的目的:A机器ssh登录B机器无需输入密码:加密方式选 rsa|dsa均可以,默认dsa 做法:1.登录A机器 2.ssh-keygen -t [rsa|ds ...

  2. hdu 1166 敌兵布阵(线段树详解)

    Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任 ...

  3. Django:之不得不说的web框架们

    python的web框架 Bottle Bpttle是一个快速.简洁.轻量级的基于WSIG的微型web框架,此框架只有一个.py文件,除了python的标准库外,其不依赖任何其它模块. pip ins ...

  4. Django:之Sitemap站点地图、通用视图和上下文渲染器

    Django中自带了sitemap框架,用来生成xml文件 Django sitemap演示: sitemap很重要,可以用来通知搜索引擎页面的地址,页面的重要性,帮助站点得到比较好的收录. 开启si ...

  5. PureMVC 框架总结收录

    PureMVC框架的目标很明确,就是把程序分为低耦合的三层:Model.View和Controller. 通过使用PureMVC后,我们的代码将集中分为以下几个部分:Façade.Command.Me ...

  6. token 入门教程

    下载 先去Apache下载一个tomcat 启动 进到安装目录的bin目录运行startup.bat,D:\apache-tomcat-8.0.33\bin (如果双击startup.bat一会自动关 ...

  7. Linux 查硬件配置

    一:查看cpu more /proc/cpuinfo | grep "model name" grep "model name" /proc/cpuinfo 如 ...

  8. vs2010在进行数据架构比较时报'text lines should not be null'错误

    通过VS2010进行服务器数据库和本地数据库比较架构(都是sql server 2008 R2)时,弹出“text lines should be not null”错误,如下图: 解决方法:在Vis ...

  9. php 数据库并发处理

    在并行系统中并发问题永远不可忽视.尽管PHP语言原生没有提供多线程机制,那并不意味着所有的操作都是线程安全的.尤其是在操作诸如订单.支付等业务系统中,更需要注意操作数据库的并发问题. 接下来我通过一个 ...

  10. Day03——类、值和对象

    1.js数字-NaN和Infinity 1.在js中,有一种特殊的数值,叫做NaN(Not a Number),表示本来要返回数值的操作却未返回数值的情况,例如0除以0的操作,在其它语言中会报错误或异 ...