一步步用HTML5动手写个图片上传预览组件

简介: 本人开发环境是windows10测试浏览器是chrome 和火狐如遇不兼容浏览器的可尝试升级浏览器或Google一下 (~ ̄▽ ̄)~1.文件的单选与多选默认情况下属于单选,添加multiple属性后就允许多选文件了 ...

本人开发环境是windows10测试浏览器是chrome 和火狐
如遇不兼容浏览器的可尝试升级浏览器或Google一下 (~ ̄▽ ̄)~

1.文件的单选与多选

默认情况下<input type="file"/>属于单选,添加multiple属性后就允许多选文件了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <label>单选:<input type="file"/></label>
        <label>多选:<input type="file" multiple="multiple"/></label>
    </body>
</html>

2.获取文件对象

打开浏览器控制台然后选择文件看控制台变化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body> 
        <label>可以这样:<input type="file" multiple="multiple" onchange="getFilesInfo(this.files)"/></label>
        <script>
            function getFilesInfo(f){
                console.log(f);
            }
        </script>
        <label>也可以这样:<input id="files" type="file" multiple="multiple" /></label>
        <script>
            function getFilesInfo2(evt) {
                var files = evt.target.files; 
                console.log(files);
            }
            document.getElementById('files').addEventListener('change', getFilesInfo2, false);
        </script>
        <label>还可以这样:<input id="fileInput" type="file" multiple="multiple" onchange="getFilesInfo3()"/></label>
        <script>
            function getFilesInfo3(){
                var files=document.getElementById("fileInput").files;
                console.log(files);
            }
        </script>
    </body>
</html>

以下是浏览器输出效果


img_357fa375675129581c4efbe4295d8144.jpe
360截图-501598312.jpg

3.常用属性

在第二步中我们已经在控制台中看到了文件了,展开我们来看看有哪些常用属性吧

img_a14bf8555856f1d3960eed70d84c8457.jpe
360截图-501740187.jpg

常用属性说明:
name-文件名
size-大小
type-文件类型
lastModified-最后修改日期

来来来 我们尝试吧一些信息给输出到页面吧

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
    </head>

    <body>
        <input type="file" id="files"  multiple />
        <output id="list"></output>

        <script>
            function handleFileSelect(evt) {
                var files = evt.target.files; //如果你是单选那就直接evt.target.files[0]
                var output = []; 
                for(var i = 0, f; f = files[i]; i++) {
                    output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
                        f.size, ' bytes, last modified: ',
                        f.lastModifiedDate.toLocaleDateString(), '</li>');
                }
                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
            } 
            document.getElementById('files').addEventListener('change', handleFileSelect, false);
        </script>
    </body> 
</html>

4.限制文件大小与文件格式

说到图片的上传预览就不得不对上传的文件进行大小与格式的过滤
假设我们现在只允许上传jpg和png且文件大小为2mb以内很简单只许判断文件信息就可以了
如果你不清楚你要过滤的文件类型你可以在控制台查看文件类型然后复制粘贴
当然你也可以在input标签里设置 accept="image/*" 来实现只允许输入图片文件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <h3>过滤出图片</h3>
        <input type="file" id="files"   multiple accept="image/*"  />
        <output id="list"></output> 
        <script>
            function handleFileSelect(evt) {
                var files = evt.target.files;
                var output = [];
                for(var i = 0, f; f = files[i]; i++) {
                    if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
                        output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
                        f.size, ' bytes, last modified: ',
                        f.lastModifiedDate.toLocaleDateString(), '</li>');
                    }
                }
                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
            } 
            document.getElementById('files').addEventListener('change', handleFileSelect, false);
        </script>
    </body> 
</html>

5.预览示例

通过动态创建img标签以及对img标签src属性绑定ObjectURL实现预览
示例

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>

   <body>
       <h3>预览</h3>
       <input type="file" id="files"  multiple accept="image/*" />
       <output id="list"></output>  
       <script>
           function handleFileSelect(evt) {
               var files = evt.target.files;
               var output = [];
               for(var i = 0, f; f = files[i]; i++) {
                   if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){
                       output.push("![]("+URL.createObjectURL(f)+")"); 
                   }
               }
               document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
           }
           document.getElementById('files').addEventListener('change', handleFileSelect, false);
       </script>
   </body>
</html>

6.单图上传预览示例

示例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <h3>简单预览示例</h3>
        <label id="fileBox" style="border: 1px #ccc solid;display:block;width: 100px;height:100px;background-clip:border-box;background-origin:padding-box;background-size:cover">
            <input type="file"  hidden="hidden" style="display: none;" onchange="fileSelect(this.files)"/>
         </label>
        <script>
            function fileSelect(f) { 
                if(!f){
                    return;
                }  
                f=f[0];
                if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){
                    document.getElementById('fileBox').style.backgroundImage="url(" + URL.createObjectURL(f)+ ")";
                } 
                
            } 
        </script>
    </body> 
</html>
相关文章
|
3月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
71 0
|
16天前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
31 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
16天前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
16 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
16天前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
32 5
|
16天前
|
数据可视化 前端开发
Twaver-HTML5基础学习(25)网元可视化视图组件(Network)
这篇文章介绍了Twaver-HTML5中的网元可视化视图组件(Network)的层次结构,包括view、rootCanvas和topCanvas的使用方法和示例。
37 6
|
16天前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
28 1
|
1月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
36 13
|
13天前
|
SQL 安全 数据库
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
|
2月前
在线将多张图片拼接起来图工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。无需本地安装软件。 下载时,使用日期时间作为文件名,规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
29 0
在线将多张图片拼接起来图工具HTML源码
|
2月前
|
Python
Python 下载 html 中的 图片
Python 下载 html 中的 图片
25 2