<!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. HTML特殊转义字符列表

    HTML特殊转义字符列表 最常用的字符实体 显示  说明  实体名称  实体编号   空格       <       小于   <  < >  大于  > > & ...

  2. Codeforces Round #389 (Div. 2, Rated, Based on Technocup 2017 - Elimination Round 3) E. Santa Claus and Tangerines

    E. Santa Claus and Tangerines time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  3. jQuery事件绑定.on()简要概述及应用

    原文地址:http://www.jquerycn.cn/a_5346     前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看 ...

  4. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

  5. NodeJS 初体验

    console.log('%s: %d', 'Hello', 25);  // 可以像C语言格式一样输出//app.jsvar http = require('http');http.createSe ...

  6. Linux 系统时间和硬件时间

    linux 的系统时间有时跟硬件时间是不同步的 Linux时钟分为系统时钟(System Clock)和硬件(Real Time Clock,简称RTC)时钟.系统时钟是指当前Linux Kernel ...

  7. 在后台启动受管服务器经常报错：Server may already be running

    报错如下: 1. Unable to obtain lock on /usr/local/odrive/odrive_chen/Middleware/user_projects/domains/oim ...

  8. java单例类/

    java单例类  一个类只能创建一个实例,那么这个类就是一个单例类 可以重写toString方法 输出想要输出的内容 可以重写equcal来比较想要比较的内容是否相等 对于final修饰的成员变量 一 ...

  9. js函数前面写上分号的原因

    说个之前先说,网站上传一些文件,考虑到性能问题,会用一些压缩软件来压缩代码(grunt,glup,webpack,etc..),这时候就可能出现一个问题.看下面代码 (function a(){... ...

  10. 【转】Expire Google Drive Files 让Google Docs云盘共享连接在指定时间后自动失效

    最近在清理Google Docs中之前共享过的文件链接,发现Google Docs多人协作共享过的链接会一直存在,在实际操作中较不灵活.正好订阅的RSS推送了Pseric写的这篇文章 - Expire ...