<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="jquery.js"></script>

</head>

<body>

	<input type="file" multiple id="inputs"/>        //multiple(多文件上传)

<div id='dd'></div>

<script>

$(document).ready(function () {

	$("#inputs").change(function () {

		var fil = this.files;

		for (var i = 0; i < fil.length; i++) {

			reads(fil[i]);

		}

	});

});

function reads(fil){

	var reader = new FileReader();

	reader.readAsDataURL(fil);

	reader.onload = function()

	{

		document.getElementById("dd").innerHTML += "<img src='"+reader.result+"'>";

	};

}

</script>

</body>

</html>

　　

html图片预览的更多相关文章

  1. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  2. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  3. js实现图片预览

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

  4. 普通图片预览及demo（非分块）

    演示地址: http://codeman35.itongyin.com:19003/v2/image.html 功能:通过加载大图预览,这种方式无法和google art 比较.只能应用于简单的图片预 ...

  5. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  6. MVC 图片预览

    1.页面cshtml <form name="frmInput" id="frmInput" method="post" action ...

  7. js 图片预览

    图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...

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

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

  9. 本地与在线图片转Base64及图片预览

    查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...

  10. win7中资源管理器不能显示图片预览的解决方法

    在用xp的时候,在资源管理器里面预览图片文件是在普通不过的事情了.换到win7之后,图片文件一直不能预览,只是显示图标还挺烦的.肯定是哪里设置的不对,下午闲来无事,找到是哪里的问题了. 如果你也遇到相 ...

随机推荐

  1. Crontab中的除号（slash）到底怎么用？

    crontab 是Linux中配置定时任务的工具,在各种配置中,我们经常会看到除号(Slash)的使用,那么这个除号到底标示什么意思,使用中有哪些需要注意的地方呢?   在定时任务中,我们经常有这样的 ...

  2. C#知识点总结系列：5、CLR的组成和运转

    clr基本 CLR(Common Language Runtime)是一个可由多种编程语言使用的“运行时”.(例如:c#,c++/cli,vb,f#,ironpython,ironruby,il... ...

  3. 【树莓派】【转】将树莓派Raspberry Pi设置为无线路由器(WiFi热点AP,RTL8188CUS芯片)

    下文为转载,文章转自:http://wangye.org/blog/archives/845/,仅供本次学习实践参考. 最近又开始折腾起Raspberry Pi来了,因为某处上网需要锐捷拨号,于是我就 ...

  4. WCF入门简单教程(图文) VS2010版

    在这个例子中我们将使用VS 2010 创建一个WCF服务,其中会了解 [DataContract] [ServiceContract] 等特性.  内置的 WCFSVCHost ,并使用“WCF测试客 ...

  5. Linux系统下安装Mysql

    原文档地址:http://www.itpub.net/thread-1766546-1-1.html 1.在Linux服务器上通过wget命令取得rpm包: wget –c http://dev.my ...

  6. 通过nginx代理之后，获取客户端ip

    1.相关nginx配置(通过header将客户端ip,host等信息传入) location ~ .*.do$ { proxy_set_header X-Real-IP $remote_addr; p ...

  7. 理解RESTful

    REST全称为Representational State Transfer,可以翻译为“表现状态转换”,是由是Roy Thomas Fielding在他2000年的博士论文中提出的,目的是为了得到一 ...

  8. org.dbunit.database.ambiguoustablenameexception

    对于一个数据库下面多个shema的情况,如果使用DBUNIT配置会出现,上面的错误,不清楚的表名,解决如下 增加红色的shema指定 参考:http://stackoverflow.com/quest ...

  9. RansomNote

    
Given
 an 
arbitrary
 ransom
 note
 string 
and 
another 
string 
containing 
letters from
 all 
th ...

  10. main函数的详解

    public : 公共的. 权限是最大,在任何情况下都可以访问. 原因: 为了保证让jvm在任何情况下都可以访问到main方法. static: 静态.静态可以让jvm调用main函数的时候更加的方便 ...