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. 在终端中创建一个简单的mysql表格

    打开终端后输入:/usr/local/MySQL/bin/mysql -u root –p 然后输入密码:***** 创建数据库:create database work; 使用当前数据库:use w ...

  2. Servlet小知识点

    1. Sevlet是一个java类,供以其他程序调用,不能独立运行,需要Servlet引擎(Servlet容器)来管理和调度. 2. 服务器启动后,一般只会创建一个Servlet实例对象,init方法 ...

  3. Mina学习之IoSession

    Session(会话)是Mina的核心部分:每当一个clinent连接到server时,都会创建一个新的session,并且保存在内存中知道该链接断开. session 是用来存储一些关于连接信息,加 ...

  4. Pgsql数据库jsonb操作函数集合

    CREATE OR REPLACE FUNCTION "json_object_del_path"( "json" json, "key_path&q ...

  5. 显示、隐藏 PowerShell

    以下是一个快速实现该需求的 module.只要将以下代码复制粘贴到 Documents\WindowsPowerShell\Packages\PowerShell\PowerShell.psm1 即可 ...

  6. kafka介绍和集群环境搭建

    kafka概念:     kafka是一个高吞吐量的流式分布式消息系统,用来处理活动流数据.比方网页的訪问量pm,日志等,既可以实时处理大数据信息     也能离线处理.     特点:       ...

  7. 【iOS-Android开发对照】 之 APP入口

    [iOS-Android开发对照]之 APP入口 [图片 Android vs iOS] 提纲 对照分析iOS,Android的入口, iOS,Android的界面单元 为什么要有那样的生命周期 继承 ...

  8. C# 动态创建出来的窗体间的通讯 delegate1

    附件 http://files.cnblogs.com/xe2011/CSharp_WindowsForms_delegate01.rar 需要每个窗体是独立存在,禁止相与引用窗体 这样干净并且可以反 ...

  9. request对象

    Servlet三大域对象的应用 request.session.application(ServletContext) 请求转发器: public void doGet(HttpServletRequ ...

  10. 输入一个字符串，去掉重复的字符，并按ASCII值排序-华为机试

    import java.util.Scanner; //输入字符串,去掉重复的字符,并按ASSIC码值排序 public class quChong { public static void main ...