基于jquery实现的上传图片及图片预览效果代码
<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件</h3>
<form name="form0" id="form0">
<input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0">
</form>
<script>
$("#file0").change(function() {
var objUrl = getObjectURL(this.files[0]);
console.log("objUrl = " + objUrl);
if(objUrl) {
$("#img0").attr("src", objUrl);
}
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
</body>
</html>
基于jquery实现的上传图片及图片预览效果代码的更多相关文章
- jquery实现上传图片及图片大小验证、图片预览效果代码
jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...
- jquery实现简单鼠标经过图片预览效果
html结构:<div class="prebtn"><img src=""/></div> css代码:#preview{ ...
- 实现QQ空间图片预览效果
今天项目遇到需求 要求 实现图片预览效果 . 类似于扣扣空间那种,本人也到网上找过 代码量太大了 ,类多到处是注释看的有点恶心 .然后自己写了一个图片预览的效果,其实很简单的 . 首先我们来分析 ...
- Android 手势检测实战 打造支持缩放平移的图片预览效果(下)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39480503,本文出自:[张鸿洋的博客] 上一篇已经带大家实现了自由的放大缩小图 ...
- 兼容最新firefox、chrome和IE的javascript图片预览实现代码
这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...
- (干货)微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...
- 微信小程序之上传图片和图片预览
这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...
- javascript和HTML5上传图片之前实现预览效果
一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...
- 基于jquery带时间轴的图片轮播切换代码
基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="decoroll2 ...
随机推荐
- z-index堆叠规则
一.z-index z-index用来控制元素重叠时堆叠顺序. 适用于:已经定位的元素(即position:relative/absolute/fixed). 一般理解就是数值越高越靠上,好像很简单, ...
- 三维网格去噪算法(L0 Minimization)
[He et al. 2013]文章提出了一种基于L0范数最小化的三角网格去噪算法.该思想最初是由[Xu et al. 2011]提出并应用于图像平滑,假设c为图像像素的颜色向量,▽c为颜色向量的梯度 ...
- POJ2955Brackets[区间DP]
Brackets Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6585 Accepted: 3534 Descript ...
- 转:设置Eclipse中的tab键为4个空格的完整方法
from: https://my.oschina.net/xunxun10/blog/110074 设置Eclipse中的tab键为4个空格的完整方法 收藏 XunXun10 发表于 4年前 阅读 ...
- noip模拟赛(一)密码
密码 (pasuwado.pas/c/cpp) [问题描述] 哪里有压迫,哪里就有反抗. moreD的宠物在法庭的帮助下终于反抗了.作为一只聪明的宠物,他打算把魔法使moreD的魔法书盗去,夺取mor ...
- MVC PageList使用(异步 与 正常)
此项目的功能为1.将数据分页显示,2.搜索数据按分页显示 3.异步或同步传递 一.第一步引用 mvc PageList插件 二.控制器写法 ) //为空则默认第一页 { var lm = DataBL ...
- 创建Visual studio项目模板 vstemplate关键点纪要
from:http://www.cnblogs.com/stickman/p/3454719.html 经过多次的实验,终于完美生成一个.VSIX的项目模板安装包,其中遇到不少问题与挫折,久经goog ...
- Centos 检查磁盘读写性能
启动Tomcat发现deploy war的速度明显变慢, 怀疑磁盘出问题 测试写入 [tomcat@localhost ~]$ dd if=/dev/zero of=kwxgd bs=64k coun ...
- PAT 1014. 福尔摩斯的约会 (20)
大侦探福尔摩斯接到一张奇怪的字条:"我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm".大侦 ...
- java script 确认框
<input name="Submit" type="submit" class="inputedit" value="删除 ...