图片上传预览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>

 

目录
相关文章
|
22天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
2月前
|
SQL 安全 数据库
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
|
4月前
|
JavaScript
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
```markdown # CAD网页编程概览 - 使用mxcad库,实现CAD操作如删除、复制、镜像、移动和旋转。 - `erase()`方法删除实体,`clone()`配合`transformBy()`用于复制和编辑。 - `mirror()`和`transformBy(setMirror)`执行镜像操作,基于参考线。 - `move()`和`transformBy(setToTranslation)`实现移动功能。 - `rotate()`和`transformBy(setToRotation)`进行旋转,支持角度输入。 ```
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
|
4月前
|
JavaScript
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
js中readAsDataURL的意思,可以用于浏览器预览图像文件或者转成base64字符串
|
5月前
|
JavaScript
JS实现照片预览
JS实现照片预览
|
4月前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
111 0
|
6月前
|
JavaScript 前端开发
js的input标签上传图片并转为base64预览
js的input标签上传图片并转为base64预览
117 0
|
6月前
使用PDF.js预览文件老是报错Message: file origin does not match viewer‘s_otherError @ app.js:1140怎么办??
使用PDF.js预览文件老是报错Message: file origin does not match viewer‘s_otherError @ app.js:1140怎么办??
|
JavaScript 前端开发
前端js上传照片实现可预览功能
前端js上传照片实现可预览功能
68 0