js上传图片及预览功能
参考了网上一些人代码写了一个上传图片及时预览的功能
<img id="imgTag" style="height: 100px;" alt="" />
<input type="file" />
function DisplayImage(fileTag,imgTagId){
var allowExtention=".jpg.png.gif";
var extentionArr=fileTag.value.split('.');
var extention = extentionArr[extentionArr.length-1];
if(!(allowExtention.indexOf(extention)>-1)){
alert("Please upload image!");
}else{
//for adveced broswer(the newest ie,chrome,ff)
if(typeof(FileReader)!=="undefined"){
var reader = new FileReader();
reader.readAsDataURL(fileTag.files[0]);
reader.onload = function(e){
document.getElementById(imgTagId).setAttribute("src", e.target.result);
}
}else{
//for(ie6)
document.getElementById(imgTagId).setAttribute("src",fileTag.value);
}
}
}
学习来源:http://www.j--d.com/js/385.html
js上传图片及预览功能的更多相关文章
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
方法一: js: /** * 上传图片本地预览方法 * @param {Object} fileObj 上传文件file的id元素 fresh-fileToUpload * ...
- nodejs实现本地上传图片并预览功能(express4.0+)
Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...
- js上传图片前预览方法(支持预览多个图片)
运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
- js上传图片并预览
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- html上传图片的预览功能实现
表单代码(仅取上传文件部分): <input class="selectImg" style="position:absolute;opacity: 0;width ...
- JS页面打印预览功能
点击按钮后就可以直接打印预览,并且隐藏了按钮,如果你不希望按钮显示,可以把那部分代码删除就可以了. <html><head><meta http-equiv=" ...
- 上传图片带预览功能兼容IE和火狐等主流浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- SB集中营
我犯了一个超级低质的错误,是关于结构体内部变量的以 . 或者 –> 调用的问题. 当时的考虑是,如果结构体内变量是指针用 ->,其他用 . . 呵呵了. 难道是因为两天没休息好吗?还是 ...
- GLSL实现HDR Rendering 【转】
http://blog.csdn.net/a3070173/archive/2008/11/29/3408573.aspx HDR - 全称High dynamic rang,是目前流行的3D特效技术 ...
- JavaScript宝座:七大框架论剑
JavaScript宝座:七大框架论剑 一周前,Throne of JS大会在多伦多召开,这应该是我参加过的最有料也最不一样的一次大会.大会官网如是说: 加载整个页面,然后再“渐进增强”以添加动态行为 ...
- !"false"==fasle
首先要搞清楚优先级 !"false" --->false false == false;---->true !""--->true; !&qu ...
- TP复习7
//编写search方法,实现搜索 public function search(){ //获取post的数据,根据数据组装查询的条件,根据条件从数据库中获取数据,返回给页面中遍历 if(isset( ...
- [MEAN+ Webstrom] First API -- 2.Debug Node.js RESTful application
Using WebStrom can easily debug the Node applcation. For example, we have an Node+Express applicatio ...
- java Date比较
package com.horizon.test; import org.apache.commons.lang.time.DateUtils; public class Hello3 { publi ...
- curl命令具体解释
对于windows用户假设用Cygwin模拟unix环境的话,里面没有带curl命令,要自己装,所以建议用Gow来模拟,它已经自带了curl工具,安装后直接在cmd环境中用curl命令就可,由于路径已 ...
- Java虚拟机工作原理具体解释
一.类载入器 首先来看一下java程序的运行过程. 从这个框图非常easy大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘其中.然后你在命令行中输入 javac YourClass ...
- Linux TCP队列相关参数的总结 转
在Linux上做网络应用的性能优化时,一般都会对TCP相关的内核参数进行调节,特别是和缓冲.队列有关的参数.网上搜到的文章会告诉你需要修改哪些参数,但我们经常是知其然而不知其所以然,每次照抄过 ...