<!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. PHP-自定义数组-预定义数组-自定义函数-预定义函数

    (1)自定义数组 —— 项目中的重点 (2)PHP预定义数组 —— 重点&难点 (3)自定义函数 —— 了解 (4)PHP预定义函数 —— 项目中的重点 1.自定义数组 数组:array,一个 ...

  2. TensorFlow 运行模型--会话（Session）

    会话模式一: 需要明确调用会话生成函数和关闭函数 # 创建一个会话 sess = tf.Session() # 使用创建好的会话进行运算 sess.run("要运算的对象") # ...

  3. JS 的execCommand 方法 做的一个简单富文本

    execCommand 当一个 HTML 文档切换到设计模式(designMode)时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容.大多数命令影响文档的选择( ...

  4. hdu 1325 && poj 1308 Is It A Tree?(并查集)

    Description A tree is a well-known data structure that is either empty (null, void, nothing) or is a ...

  5. HDU 2639 01背包（分解）

    http://acm.hdu.edu.cn/showproblem.php?pid=2639 01背包第k优解,把每次的max分步列出来即可 #include<stdio.h> #incl ...

  6. .NET Core微服务之路：基于gRPC服务发现与服务治理的方案

    重温最少化集群搭建,我相信很多朋友都已经搭建出来,基于Watch机制也实现了出来,相信也有很多朋友有了自己的实现思路,但是,很多朋友有个疑问,我API和服务分离好了,怎么通过服务中心进行发现呢,这个过 ...

  7. C# MVC微信扫码支付

    项目需求:学校学生网上缴费项目,刚来公司实习网上百度了各种资料,感谢很多大神避免了很多大坑. 本次扫码支付为:电脑生成二维码,手机微信扫码进行付款.建议开发前下载官方demo熟悉及后续有用到里面代码: ...

  8. Android ------------------ 带边框的圆角矩形

    <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http:/ ...

  9. C++数组,sort

    cmake_minimum_required(VERSION 3.5) project(Test) add_executable( te test.cpp ) test.cpp #include &l ...

  10. JavaScript实现HTML页面集成QQ空间分享功能

    <!DOCTYPE HTML> <html> <head> <title>QQ空间分享</title> <meta http-equi ...