专栏首页hbbliyong图片上传预览js

图片上传预览js

    <!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 调试小技巧

    ‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入...

    hbbliyong
  • 基于Three.js的360度全景--photo-sphere-viewer--简介

    这个是基于three.js的全景插件  photo-sphere-viewer.js  ————————————————————————————————————...

    hbbliyong
  • 错误提示之(MVC3.0):HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检查以下 URL 并确保其拼写正确 MVC误设起始页

    MVC3.0框架开发项目: 有时在程序运行的时候会出现“HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除,或其名称已更改,或暂时不可用。请检...

    hbbliyong
  • 第86节:Java中的JQuery基础

    jquery是一种快速,小巧,功能丰富的JavaScript库,可以让html文档遍历和操作,事件处理,动画和ajax更加容易使用的一种api,可以在多种浏览器...

    达达前端
  • 打印进度条

    py3study
  • DOM绑定事件的三种方式

    1.直接在html中οnclick=“alert(‘执行了html绑定的方法’)”

    刘亦枫
  • 以太坊智能合约部署与交互

    我们再打开一个终端,打开cluster1的peer02的控制台,直接at到上一个终端部署的智能合约地址并进行set操作

    笔阁
  • proc-tabulate-report

    用户1733462
  • Matlab基础题总结和习题提示

    安装与使用说明:https://blog.csdn.net/zhangrelay/article/details/79622079

    zhangrelay
  • 偶然发现张戈博客已被DMOZ收录,终于不是中国山寨版DMOZ了

    近来没少折腾博客,导致索引、关键词等都掉得很惨,甚至牵连到了 Alexa 排名,之前博客的 Alexa 排名一直呈上升趋势,折腾博客前 Alexa 已达到全球前...

    张戈

扫码关注云+社区

领取腾讯云代金券