<!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. JavaScript:void(0)使用介绍

    1.点击链接后不做任何事情(为防止点击链接后跳转到页首,onclick事件return false即可) <a href="javascript:void(0);" > ...

  2. jxl操作excel写入数据不覆盖原有数据示例

    public void readTO() {        Workbook wb = null;        WritableWorkbook wwb = null;        try {   ...

  3. 把router-link标签渲染成指定的标签

    <router-link>标签默认渲染成 <a>标签,可以通过tag属性把router-link渲染成指定的标签,如: <router-link to="/&q ...

  4. JavaScript基础视频教程总结（031-040章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. Kotlin 开篇

    Kotlin 是一个基于 JVM 的新的编程语言,由 JetBrains 开发官网地址:http://kotlinlang.org.JetBrains,作为目前广受欢迎的 Java IDE Intel ...

  6. docker 容器和镜像理解

    1.镜像是Docker容器的基石,容器是镜像的运行实例,有了镜像才能启动容器.容器和镜像是一对一的,一个容器里就运行一个镜像. 1.base镜像----提供了一个基本的操作系统环境,用户可以根据需要安 ...

  7. Dynamic Programming | Set 2 (Optimal Substructure Property)

    正如我们在 Dynamic Programming | Set 1 (Overlapping Subproblems Property) 中讨论的那样,当一个问题具有以下2种性质时,建议使用动态规划来 ...

  8. JQuery Mobile - input 属性为 number，maxlength不起作用如何解决？

    <input type="text"  maxlength="5" />   效果ok,当 <input type="number& ...

  9. hdoj6483 A Sequence Game（ST预处理RMQ+莫队）

    传送:http://acm.hdu.edu.cn/showproblem.php?pid=6483 题意:有长度为$n$的数组,对于一个子区间$[l,r]$内,存在最大值$mx$与最小值$mi$,有$ ...

  10. 在notepad++中使用正则匹配功能(一-龥！-～) 中文[利刃篇]

    用正则时间越久,人就越懒,就越知道正则的强大.正则,不只是在代码里用到,在字符查找是也会用到,学会适当使用正则,将会使你的工作事办功倍!但是,中文却是一个砍,不容易过. 于是在用notepad++,也 ...