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. Android Fragment 多标签应用

    1.使用Fragment 可以方便的替代TabActivity.ViewGroup 2.同时也省去了在AndroidManifest.xml文件中 添加相应的Activity 3.Fragment 是 ...

  2. java 学习笔记4

    (1)      线程的强制运行 先看线程强制运行的实例 ,再解释程序中是如何让程序强制运行的 public class ThreadTest1 implementsRunnable { public ...

  3. 在终端中创建一个简单的mysql表格

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

  4. C#.net 创建XML

    方法一:按照XML的结构一步一步的构建XML文档.    通过.Net FrameWork SDK中的命名空间"System.Xml"中封装的各种类来实现的 方法二:直接定影XML ...

  5. 升级OpenSSH详细步骤

    由于系统扫描到OpenSSH版本太低,所以需要将其升级到高版本.网上搜罗数个文章,都多多少少有点疏漏.加上自己之前没升级过SSH,参考好几个文章查缺补漏才升级成功,着实废了不少劲儿.所以综合一下前辈们 ...

  6. EXCEL 2010学习笔记—— 动态图表

    今天梳理一下动态图表的相关内容,做一个简单的整理 关键的操作点: 1.插入动态控制器:开发工具->插入->表单控件 对控件进行修改  右键 设置控件格式->单元格链接 用来作为if ...

  7. 用LINQPad加上Tx驱动来分析log

    Tx (LINQ to Logs and Traces)是微软发布的开源工具.可以用这个工具来使用LINQ分析日志,包括 Event Tracing for Windows (ETW) Event L ...

  8. SQL SERVER 中如何将NULL转换为0

    select isnull(fieldname,0) from tablename 如果字段fieldname的值是null,则结果是0

  9. JQuery Kendo UI使用技巧总结

    Kendo UI开发总结 By Gloomyfish on 2013-04-25 在Grid中支持分页刷新:            scrollable: {virtual : true }, 在Gr ...

  10. 【PHP分享】Windows tail工具分享

    作者:zhanhailiang 日期:2014-09-28 在Linux下能够使用tail -f工具实时查看输出的日志.近期切换到本地Windows开发环境,顿时有点不爽.百度了下,最终找到tail的 ...