<!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. 深入C#的String类

  2. IPv6下网络编程socket， TCP和UDP例子，以及兼容IPV4和IPV6的类

    一.TCP socket ipv6与ipv4的区别 服务器端源代码如下: #include <stdio.h> #include <stdlib.h> #include < ...

  3. SAS语言结构

    SAS程序用于访问.管理.分析和展现数据.其基础组成部分是 DATA步和PROC步,PROC步又称为SAS过程.一个SAS程序可包含以 任意顺序组合的多个DATA步和多个PROC步. DATA步通常用 ...

  4. mysql 地理位置定位

    SET @pt2 = ST_GeomFromText('POINT(116.405289 39.904987)'); SELECT *,ST_Distance_Sphere(ST_GeomFromTe ...

  5. jdk8中关于操作集合的一些新特性，遍历和排序操作

    jdk8增加了不少新的东西,在集合操作这块,就有如 lamda表达式,stream,sort,optional等新的类,主要涉及遍历和排序等方面,新特性提升了不少性能,我们开发就是要拥抱新事物,守着老 ...

  6. 隐藏字符 BOM

    如果您在修改任何PHP文件後发生: * 不能登入或者不能登出: * 页顶出现一条空白: * 页顶出现错误警告: * 其它不正常的情况.   则多半是编辑器的问题. 本程序采用UTF-8编码.现在几乎所 ...

  7. django-celery 创建多个broker队列 异步执行任务时指定队列

    一.这里不再详细述说 django 框架中如何使用celery, 重点放在如何实现创建多个队列, 并指定队列存放异步任务 笔者使用   django-celery==3.2.2 模块, 配置项及配置参 ...

  8. JavaScript操作和使用Cookie

    Cookie概述 Cookie是由服务器端生成并储存在浏览器客户端上的数据. 在javaweb开发中Cookie被当做java对象在web服务器端创建,并由web服务器发送给特定浏览器客户端,并且we ...

  9. 第十节：详细讲解一下Java多线程，随机文件

    前言 大家好,给大家带来第十节:详细讲解一下Java多线程,随机文件的概述,希望你们喜欢 多线程的概念 线程的生命周期 多线程程序的设计 多线程的概念 多线程的概念:程序是静态的,进程是动态的.多进程 ...

  10. postgresql-排序

    postgresql的排序. https://www.cnblogs.com/flying-tiger/p/8120046.html 1.是根据排序数据量的大小来判断,如果数据量少到能够整体放到内存的 ...