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. YII 权限管理

    CREATE TABLE IF NOT EXISTS `admin_role` ( `id` ) unsigned NOT NULL auto_increment, `name` ) NOT NULL ...

  2. 问题-[WIN764位系统]操作UDL驱动不全处理

    http://www-01.ibm.com/support/docview.wss?uid=swg21503768 方法# 1 单击“开始——运行” 输入一个命令类似如下:        C:\Win ...

  3. Uniform resource name

        A uniform resource identifier (URI) is a uniform resource locator(定位器,探测器) (URL), uniform resour ...

  4. Shell if else语句

    if 语句通过关系运算符判断表达式的真假来决定执行哪个分支.Shell 有三种 if ... else 语句: if ... fi 语句: if ... else ... fi 语句: if ... ...

  5. HTML5 UTF-8 中文乱码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. hdoj 5137 How Many Maos Does the Guanxi Worth【最短路枚举+删边】

    How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/5 ...

  7. seaJs学习笔记之javascript的依赖问题

    之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...

  8. Spring技术内幕——深入解析Spring架构与设计原理（一）IOC实现原理

    IOC的基础 下面我们从IOC/AOP开始,它们是Spring平台实现的核心部分:虽然,我们一开始大多只是在这个层面上,做一些配置和外部特性的使用工作,但对这两个核心模块工作原理和运作机制的理解,对深 ...

  9. Java多线程异步调度程序分析（二）

    源自:http://blog.sina.com.cn/s/blog_4cc16fc50100c0uh.html public abstract class Result {   //抽象的结果类 pu ...

  10. C# 的异步

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...