上传图片js

最新推荐文章于 2023-03-17 19:33:04 发布

wsbg54

最新推荐文章于 2023-03-17 19:33:04 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax js 文章标签： js 图片上传 FileReader js上传

本文链接：https://blog.youkuaiyun.com/wsbg54/article/details/82150637

ajax 同时被 2 个专栏收录

2 篇文章

订阅专栏

1 篇文章

订阅专栏

博客主要围绕JS实现图片上传展开，先提及了HTML标签元素，后续有关于JS的表述，涉及到FileReader等技术，聚焦于信息技术领域的前端图片上传功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看html标签元素
<td> <img src="${ctx}/static/assets/img/service.png"id="uploadPreview" /> <input type="hidden" name="logoUrl" id="logoUrl" /> </td> <td> <div class="file-container"> <a>换一个新头像</a> <input type="file" accept="image/*" id="uploadLogo" /> </div> <p>你可以选择jpg, gif, png格式的图片，最大1Mb</p> </td>
js表述：

$('#uploadLogo').on('change', handleFileSelect);
// logo上传
    var handleFileSelect = function(evt) {
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
            var fileSize = f.size;
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();
            reader.onload = (function(theFile) {
            return function(e) {
                var _src = event.target.result;
                // 模拟上传交互动画
                //$('.upload-tip').addClass('spin').slideDown();
                setTimeout(function() {
                    /**
                    * [_tag description]
                    * @type {number}
                    * @value {0:上传成功，1:上传失败，2:大小超出限制}
                    */
                    var _tag = Math.floor(Math.random() * 1);//Math.floor(Math.random() * 1);
                    var tipText = ["上传成功", "上传失败，请重试！", "文件大小超出网站限制，请重新上传！"];
                    switch (_tag) {
                        case 0:
                            $('.form-upload').addClass('preview');
                            $('#uploadPreview').attr('src', _src);
                            $("#logoUrl").val(_src);
                            break;
                        case 1:
                            break;
                        case 2:
                            break;
                    }
                    $('.upload-tip').removeClass('spin').slideUp();
                }, 2000);
            };
        })(f);
        reader.readAsDataURL(f);
        }
    }