详细内容请点击

参考了网上一些人代码写了一个上传图片及时预览的功能

<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上传图片及预览功能的更多相关文章

  1. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  2. nodejs实现本地上传图片并预览功能(express4.0+)

    Express为:4.13.1  multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片 ...

  3. js上传图片前预览方法(支持预览多个图片)

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  4. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  6. js上传图片并预览

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. html上传图片的预览功能实现

    表单代码(仅取上传文件部分): <input class="selectImg" style="position:absolute;opacity: 0;width ...

  8. JS页面打印预览功能

    点击按钮后就可以直接打印预览,并且隐藏了按钮,如果你不希望按钮显示,可以把那部分代码删除就可以了. <html><head><meta http-equiv=" ...

  9. 上传图片带预览功能兼容IE和火狐等主流浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. javascript数字转汉字中文数字

    /* 工具包 */ var Utils={ /* 单位 */ units:'个十百千万@#%亿^&~', /* 字符 */ chars:'零一二三四五六七八九', /* 数字转中文 @numb ...

  2. Django官方文档学习2——数据库及模板

    网址:https://docs.djangoproject.com/en/1.10/intro/tutorial02/ 1.扫描installed_apps,创建需要的数据库table python ...

  3. How to Use a Function or a Procedure as a Parameter in another Function

    http://delphi.about.com/od/adptips2006/qt/functionasparam.htm In Delphi, procedural types (method po ...

  4. FluentData官方文档翻译

    开始 要求 .NET 4.0. 支持的数据库 MS SQL Server using the native .NET driver. MS SQL Azure using the native .NE ...

  5. rqnoj-217-拦截导弹-最长不上升子序列以及不上升子序列的个数

    最长上升子序列的O(n*log(n))算法. 不上升子序列的个数等于最长上升子序列的长度. #include<string.h> #include<stdio.h> #incl ...

  6. 【JavsScript】作用域链

    阿里巴巴广招前端.Java.测试.算法人才,只要你有一技之长,精通于某项领域,无学历要求,都可以来试试,有兴趣的联系luyong.sunly@alibaba-inc.com

  7. TP复习

    第一课,三步骤 1,.名称   2.路径 3.引用核心文件 4,.公用的可以建立public  upload css 等 第二课 uRL四中模式 ~ActionClass.php 一.什么是MVC / ...

  8. stm32 IAP + APP ==>双剑合一

    (扩展-IAP主要用于产品出厂后应用程序的更新作用,上一篇博文详细的对IAP 升级程序做了详细的分析http://blog.csdn.net/yx_l128125/article/details/12 ...

  9. Swift2.0 中的String(三):类型转换

    本系列第三篇,String相关的类型转换.其他的几篇传送门(GitHub打不开链接的同学请自行把地址github改成gitcafe,或者直接去归档里找:-P): Swift2.0 中的String(一 ...

  10. android之多媒体篇(一)

    Android 4.0.3(Api Level 15)支持的多媒体格式. 注意:有些设备可能支持其他的文件格式. 1.Audio AAC LC/LTP.HE-AACv1(AAC+).AMR-NB.AM ...