<!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. Linux常用命令及shell脚本

    一.     用户管理(添加用户.切换用户.删除用户) ~                                                                        ...

  2. VirtualBox piix4_smbus Error

    VirtualBox piix4_smbus Error   VirtualBox 3.2.10 gives me the following error message when booting U ...

  3. idea打包java可执行jar包

    1,在项目上鼠标右键 --> Open Module Settings 2, Artifacts --> + --> JAR --> From modules with dep ...

  4. [转载]自己编写 php 在线问卷调查程序

        <html> <head> <title>问卷调查</title> <meta http-equiv="Content-Type ...

  5. HTML的基本骨架

    HTML:生命html网页当前范围,所有内容写在该标签中 head:用来设置当前页面的一些属性及样式等等.这部分是用户看不到的,title除外. body:网页的内容部分,网页中所有布局写在该标签中. ...

  6. Keil软件常见的警告和错误含义。——Arvin

    1. warning:  #767-D: conversion from pointer to smaller integer 解释:将指针转换为较小的整数 影响:可能造成的影响:容易引起数据截断,造 ...

  7. 优秀开发人员网站推荐。——Arvin

    常用论坛汇总:智能车制作论坛:http://www.znczz.com/中国电子网:http://www.21ic.com/爱板网:http://www.eeboard.com/电子发烧友:http: ...

  8. JAVA开发错误总结(仅记录遇到的错误---后续不断更新......)

    =======华丽分割线(工具总结)===================== 1:Maven项目中junit测试找不到主类的问题 Class not found com.test.utils.tes ...

  9. [转载] Jenkins入门总结

    转载自http://www.cnblogs.com/itech/archive/2011/11/23/2260009.html 在网上貌似没有找到Jenkins的中文的太多的文档,有的都是关于Huds ...

  10. 0527 Sprint 1 总结

    首页 登陆与注册 除登陆和注册之外,我们觉得最主要的是做完登陆和注册的返回功能 界面选项 查询界面 显而易见的我们做了界面之后我们的工作量也减少了,因为相对来讲前期工作比较容易,而各个功能板块所计划的 ...