图片上传预览js

简介: DOCTYPE html> $(function(){ function preView(preDIV){ var files=preDIV.
    <!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>

 

目录
相关文章
|
6月前
|
前端开发 JavaScript Java
基于cropper.js的图片上传和裁剪
基于cropper.js的图片上传和裁剪
117 0
|
存储 JavaScript 前端开发
js实现灵活下载和预览网络链接pdf文件
js实现灵活下载和预览网络链接pdf文件
877 0
|
存储 JavaScript 安全
阿里 OSS图片上传 —— 原生JS中使用
这是最近开发遇到的一个坑,&quot;可爱&quot;的前辈们留下来的宝贵财产,很不幸的是,一行注释都没给,所以开心(被迫)的去研究了一下文档. 然而发现官方文档又臭又长,于是自己捣鼓了下,总算是搞出来了.
1052 0
阿里 OSS图片上传 —— 原生JS中使用
|
8月前
|
JavaScript
js上传图片本地预览(整理)
js上传图片本地预览(整理)
|
6月前
|
JavaScript 前端开发
前端js上传照片实现可预览功能
前端js上传照片实现可预览功能
33 0
|
8月前
|
JavaScript
js多图片上传--可删除demo效果示例(整理)
js多图片上传--可删除demo效果示例(整理)
|
JavaScript 对象存储
vue2.6,js集成oss后图片上传成功后,下载图片打开显示图片损坏
我确认本地上传的图片没问题,我用的put直传,拿到返回的url,换了几张图都这样
vue2.6,js集成oss后图片上传成功后,下载图片打开显示图片损坏
|
JavaScript Java
Vue+JS+layUI 完成预览模式功能
Vue+JS+layUI 完成预览模式功能
|
JavaScript
原生 js 实现截图粘贴预览图片功能
原生 js 实现截图粘贴预览图片功能
123 0
原生 js 实现截图粘贴预览图片功能
|
JavaScript
预览本地图片原生js
预览本地图片原生js