javascript预览本地图片

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="buexplain">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery.js"></script>
</head>
<body>
    <input type="file" id="imgfile">
    <img id="imgsrc" src="">
    <script>
        $(function() {
            $("#imgsrc").hide();
            $("#imgfile").change(function() {
                var objUrl = getObjectURL(this.files[0]);
                console.log("objUrl = " + objUrl);
                if (objUrl) {
                    $("#imgsrc").attr("src", objUrl);
                    $("#imgsrc").show();
                }
            });

            function getObjectURL(file) {
                var url = null;
                if (window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if (window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if (window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }
        });
    </script>
</body>
</html>
时间: 2024-11-07 03:13:21

javascript预览本地图片的相关文章

HTML5预览本地图片

以http协议开头的url的网页,即服务器上的网页是不能显示计算机本地图片的,如果想查看本地图片但不使用服务端的上传功能,可以使用html5的fileReader实现. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>html5预览本地图片</title> </head> <style type="text/css&

JavaScript使用html5 fileReader来预览本地图片

以http协议开头的url的网页,即服务器上的网页是不能显示计算机本地图片的.如果想查看本地图片但不使用服务端的上传功能,可以使用html5的fileReader实现.(IE10以下的浏览器不支持这个功能) <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>html5 fileReader</title> </head> <st

基于HTML5的可预览多图片Ajax上传

一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观. 我之前曾翻译编辑过一篇“Ajax Upload多文件上传插件”的文章,此插件的亮点是使用隐藏的iframe框架页面模拟ajax上传,但是,实际上,还是一次只能上传1张图片,可以多次上传而已. HTML5是个好东东,其中之一就是支

一款基于jQuery可放大预览的图片滑块插件

今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的JavaScript功底,可以自己修改代码来实现这一功能.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="slider"> <div class="spic"> <img src="images

javascript预览图片——IT轮子系列(九)

再使用htm控件 <input type="file" name="file" /> 上传图片的时候,往往需要先预览图片,然后点击保存按钮,把图片上传到服务器.今天正好解决了这样一个问题,记录博文,以备后用. html 代码 <div> <input type="file" id="filePreview" /><br /> <img id="imgPhoto&q

js 预览本地上传图片

网址http://jingyan.baidu.com/article/215817f78370dd1edb142372.html <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td height="101" align="

js:s上次预览,上传图片预览,图片上传预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

HTML5可预览多图片ajax上传(使用formData传递数据)

在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是ajax多图片上传前预览效果. 1. formData的基本的用法:首先创建一个 空对象实例 代码如下:var formData = new FormData(); 1-1 获取值通过get(key)/getAll(key)来获取对应的value:比如: formData.get("name"); // 获取key为name的第一个值. formData.g

用javascript预加载图片、css、js的方法研究

预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提升用户体验.在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户.不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果. 先说需要知道的服务器返回的status code:status-code: 200 - 客户端请求成功status-code: 304 -