简单的html图片上传工具

拼搏现实的明天。 2021-09-27 15:42 285阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>图片上传预览</title>
    
    var iMaxFilesize = 2097152; //2M
    <script type="text/javascript">
        function imgPreview(fileDom){
            //判断是否支持FileReader
            if (window.FileReader) {
                var reader = new FileReader();
            } else {
                alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
            }
    
            //获取文件
            var file = fileDom.files[0];
            var imageType = /^image\//;
            //是否是图片
            if (!imageType.test(file.type)) {
                alert("请选择图片！");
                return;
            }
            if (file .size > iMaxFilesize) {
                alert("图片大小不能超过2M");
                return;
            }
            //读取完成
            reader.onload = function(e) {
                //获取图片dom
                var img = document.getElementById("preview");
                //图片路径设置为读取的图片
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
            alert(document.getElementById("file"))
        }
    </script>
    </head>
    <body>
        <img id="preview" />
        <br />
        <input type="file" name="file" id="file" onchange="imgPreview(this)" />
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关 springboot实现简单的图片上传

springboot实现简单的图片上传 1. 创建配置类 / @author flame @version 1.0.0

电玩女神/ 2022年12月28日 07:14/ 0 赞/ 195 阅读

相关 HTML 各平台上传图片

[https://github.com/tx1721110240/UploadImg][https_github.com_tx1721110240_UploadImg] 苹果

柔光的暖阳◎/ 2022年12月23日 01:00/ 0 赞/ 194 阅读

相关 java上传图片工具类

package com.findmiThree.utils.uploadimg; import java.io.File; import ja

矫情吗；*/ 2022年11月21日 04:11/ 0 赞/ 227 阅读

相关 html 无组件上传图片,javascript无组件上传图片类

javascript无组件上传图片类首先声明本代码是转自其他网站的，版权应该归属其所有者，贴出来的目的是为了和大家一起探讨、共同学习。下面是代码： default.asp

野性酷女/ 2022年10月06日 07:52/ 0 赞/ 198 阅读

相关 html5压缩图片并上传

手机端图片有很大的，上传的时候很慢，这时候就要压缩一下了，有一个开源的js可以压缩图片的大小，开源地址如下：[https://github.com/think2011/loca

阳光穿透心脏的1/2处/ 2022年08月04日 12:59/ 0 赞/ 251 阅读

相关 html上传图片后，在页面显示上传的图片

html上传图片后，在页面显示上传的图片 1、html <form class="container" enctype="multipart/form-data"

爱被打了一巴掌/ 2022年06月04日 02:42/ 0 赞/ 308 阅读

相关 HTML上传图片的回显

document.getElementById("showImg").src = window.URL.createObjectURL(personsFile.file

- 日理万妓/ 2022年05月25日 12:55/ 0 赞/ 493 阅读

相关关于HTML中上传图片

[关于HTML中上传图片][HTML] 值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,meth

女爷i/ 2022年05月06日 13:46/ 0 赞/ 244 阅读

相关 laravel简单图片上传

1. 先获取传过来的图片 2.可以选择打印一下 3.获取表的后缀 4.返回上传文件的扩展名称 5.给图片一个时间+随机数 6.创建图片目录 public f

冷不防/ 2022年04月16日 02:23/ 0 赞/ 244 阅读

相关简单的html图片上传工具

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片上传预览</

拼搏现实的明天。/ 2021年09月27日 15:42/ 0 赞/ 286 阅读