<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function(){

                function preView(preDIV){

                var files=preDIV.files;

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

                    var data=URL.createObjectURL(files[i]);

                    $('<img class="img-item" src="'+data+'" />').appendTo( $("#upload") );

                }

            }

                $(':file').change(function(){console.log(this);

                    preView(this);

                });

            });

        </script>

    </head>

    <body>

        <div id="upload">

        </div>

        <input type="file" value="选择图片" multiple="multiple"/>

    </body>

</html>

图片上传预览js的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  3. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  4. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  5. js:s上次预览，上传图片预览，图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

  7. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  8. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  9. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

随机推荐

  1. python之模块调用

    1.以 atm_run 为入口,在atm中的main模块调用config中的settings from config import settings 2.以atm_run为入口,在main中调用log ...

  2. MySQL skip-character-set-client-handshake导致的一个字符集问题

    http://www.quweiji.com/mysql-skip-character-set-client-handshake%E5%AF%BC%E8%87%B4%E7%9A%84%E4%B8%80 ...

  3. 关于webconfig的记录恢复本

    <?xml version="1.0"?> <!--注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置.可以使用 Visual S ...

  4. SSM框架整合（Spring+SpringMVC+MyBatis+Oracle）

    1.开发环境搭建以及创建Maven Web项目 参看之前的博文[确保maven web项目不报错]:http://www.cnblogs.com/cainiaomahua/p/6306476.html ...

  5. 高效率php注意事项

    1.尽量静态化: 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显. 其实静态方法和非静态方法的 ...

  6. 【转】B树、B+树、B*树

    出处:http://blog.csdn.net/v_JULY_v 1.前言: 动态查找树主要有:二叉查找树(Binary Search Tree),平衡二叉查找树(Balanced Binary Se ...

  7. open：在终端打开文件|应用程序等

    1. 需求&解决方案 打开文件 或url(用默认应用程序): $ open fileName 打开文件 或url(用指定应用程序): $ open -a appName fileName ## ...

  8. iOS编码规范(简版)

    1. 总体指导原则 [规则1-1]首先是为人编写程序,其次才是计算机. 说明:这是软件开发的基本要点,软件的生命周期贯穿产品的开发.测试.生产.用户使用.版本升级和后期维护等长期过程,只有易读.易维护 ...

  9. WPF触发器(Trigger) - DataTrigger

    官方文档中对DataTrigger的介绍 Represents a trigger that applies property values or performs actions when the ...

  10. Spring MVC 原理探秘 - 一个请求的旅行过程

    1.简介 在前面的文章中,我较为详细的分析了 Spring IOC 和 AOP 部分的源码,并写成了文章.为了让我的 Spring 源码分析系列文章更为丰富一些,所以从本篇文章开始,我将来向大家介绍一 ...