Jquery方法一：
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <input type='file' id='file'/>
    <div style="width:100px;height:100px;border:1px solid red" id="img"></div>
</body>
<script>
    $(function(){
       $("#file").change(function(e){
             // var file = e.target.files||e.dataTransfer.files;
var file = this.files[0];
             if(file){
                 var reader = new FileReader();
                 reader.readAsDataURL(file);
                 reader.onload=function(){
                        $("<img src='"+this.result+"'/>").appendTo("#img");
 
                 }
 
                // reader.readAsDataURL(file);
            }
      });
   })
 
 </script>
</html>
 
 
JS方法二：
Js 方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By：DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
    var docObj=document.getElementById("doc");
 console.log(docObj.files[0]);
    var imgObjPreview=document.getElementById("preview");
    if(docObj.files &&docObj.files[0]){
        //火狐下，直接设img属性
        imgObjPreview.style.display = 'block';
        imgObjPreview.style.width = '150px';
        imgObjPreview.style.height = '180px'; 
    //imgObjPreview.src = docObj.files[0].getAsDataURL();
 
    //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }else{
        //IE下，使用滤镜
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        var localImagId = document.getElementById("localImag");
        //必须设置初始大小
        localImagId.style.width = "150px";
        localImagId.style.height = "180px";
        //图片异常的捕捉，防止用户修改后缀来伪造图片
    try{
        localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
    }catch(e){
        alert("您上传的图片格式不正确，请重新选择!");
        return false;
    }
        imgObjPreview.style.display = 'none';
        document.selection.empty();
    }
        return true;
    }
 
</script>
</head>
 
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="002.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;border:1px solid red"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>

Jquery OR Js 实现图片预览的更多相关文章

  1. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  2. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  3. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

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

  4. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  5. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

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

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

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

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

  8. JS实现图片预览与等比缩放

    案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

  9. js实现图片预览

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

随机推荐

  1. hdoj 4738 Caocao's Bridges【双连通分量求桥】

    Caocao's Bridges Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. nyoj 353 3D dungeon

    3D dungeon 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 You are trapped in a 3D dungeon and need to find ...

  3. hdoj 3336 Count the string【kmp算法求前缀在原字符串中出现总次数】

    Count the string Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  4. android4.0 FaceDetection笔记

    这几天研究了下andoid4.0.3的FaceDetection这里写一下大致的流程,方便日后查阅. 相关说明可以在这里找到: frameworks/base/docs/html/guide/topi ...

  5. Android中shape属性详解

    一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标签怎么用. 1.新建shape文件 首先在res/drawable文件夹下,新建一个文件,命名为:shape_radius.x ...

  6. 深入了解当前ETL中用到的一些基本技术

    数据集成是把不同来源.格式和特点的数据在逻辑上或物理上有机地集中,从而为企业提供全面的数据共享,是企业商务智能.数据仓库系统的重要组成部分.ETL是企业数据集成的概念出发,简要分析了当前ETL中用到的 ...

  7. Linux模式设计系列( 内核与应用关联思考）

    http://blog.chinaunix.net/uid/20608849/cid-25333-list-2.html

  8. Memcache简介

    简介 Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果等.简单的说就是将数据调 ...

  9. HTML5的你应该记住的一些知识点

    刚开始学HTML5是从w3school开始的,那只是非常简单的一些了解,后面开始看一些xiongdilian的HTML5+CSS3的视频,照着视频做了一些简单的demo(需要的童鞋可以联系我,当然网上 ...

  10. gulp 初体验

    1,全局安装 gulp npm install --global gulp 但是一直无法成功,后来才知被墙了,于是使用了如下命令,安装cnpm npm install -g cnpm --regist ...