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/ ...
随机推荐
- C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- 如何修改meclipse中的默认浏览器
window------->preferrences------------>general-------------->web browser---------->选择你要使 ...
- Leetcode: Longest Palindromic Substring. java
Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...
- Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt)
Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt) 作者: Desmond Chen,发布日期: 2014-05- ...
- .NET连接SAP系统专题:C#调用RFC代码(三)
本文就说明在C#中如何编写代码来调用SAP中的RFC函数获取数据. 首先需要引用两个NCO3.0的DLL DLL下载地址:http://files.cnblogs.com/mengxin523/SAP ...
- 【百度地图-安卓SDK】从头开始写android程序
[百度地图-安卓SDK]从头开始写android程序首先确保有这四个文件 安装jdk先安装android开发SDK(并不只是为eclipse服务的),即运行installer_r15-windo ...
- 视频流服务器配置[windows平台][转]
视频流服务器配置[windows平台] 搭建一个Flv视频播放服务器 作者:笨小孩 发布于:2013-9-1 20:18 分类:环境架设 IIS,Apache,Nginx环境都可以很好的支持视频的播放 ...
- Android中如何实现多行、水平滚动的分页的Gridview?
功能要求: (1)比如每页显示2X2,总共2XN,每个item显示图片+文字(点击有链接). 如果单行水平滚动,可以用Horizontalscrollview实现. 如果是多行水平滚动,则结合Grid ...
- 使用Visual Studio创建简单的自己定义Web Part 部件属性
使用Visual Studio创建简单的自己定义Web Part 部件属性 自己定义属性使用额外的选项和设置拓展你的Web part部件.本文主要解说怎样使用Visual Studio创建简单的自己定 ...
- HDU1003 Max Sum(求最大字段和)
事实上这连续发表的三篇是一模一样的思路,我就厚颜无耻的再发一篇吧! 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1003 -------------- ...