专栏首页laopan技术分享图片的选择和显示

图片的选择和显示

图片的选择和显示

开发工具与关键技术:MVC

作者:盘洪源

撰写时间:2019年6月5日星期三

在做一些页面的时候避免不了图片的上传,这个图片的上传效果是怎么样的。

看下图:

这个就是图片的选择框,在我们点击这个框的时候会给我们弹出一个文件选择,当我们选中图片的时候就把图片显示在这个框上面,如果选中的不是一个图片这个时候就需要用到一个正则表达式来进行一个判断。

HTML代码:

<img src="" alt=""
width="150" height="180" id="IsImgStudentPicture"
class="border border-primary"
ondblclick="showImageFile('IStudentPicture')" />

                           <input
type="file" name="fileStudentImage"
id="IStudentPicture" hidden accept="image/*"
onchange="loadImgToEimg('IStudentPicture')" />

                           <p>双击选择图片</p>

然后是点击这个框就弹出一个图片文件的选择:

function showImageFile(imageFileId)
{

           
$("#" + imageFileId).click();

        }

然后是一个图片文件的正则表达式:

这种正则表达式网上很多,如果不会自己写可以去网上找。

然后就是匹配图片正则表达式:

var imgReader =
new FileReader();

再一个就是文件读取onload事件:

imgReader.onload = function (evt) {

            //绑定新增图片

           
$("#IsImgStudentPicture").attr("src",
evt.target.result);

            //绑定修改图片

           
$("#UsImgStudentPicture").attr("src",
evt.target.result);

        }

最后就是将选择的图片显示到img元素上

        function
loadImgToEimg(imageFileId) {

            //选取选择图片

            var
imgfFile = $("#" + imageFileId).get(0).files[0];

            //加载image标签中

            if
(!regexImageFilter.test(imgfFile.type)) {

               
//alert("选择的不是一个有效的图片文件");

               
layer.msg('选择的不是一个有效的图片文件', { icon: 0 });

            }

           
imgReader.readAsDataURL(imgfFile);

        }

效果图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linq分组数据累加

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    PHY_68
  • 修改数据

    以前我对删除数据有点误解,因为以前都是用到的layui表格的自定义按钮的删除按钮,通过删除按钮弹出来一个模态框,达到一个数据的删除效果。但这次我做的页面并不是这...

    PHY_68
  • Layui表格单元个编辑事件

    在做到一个页面的时候我需要做到一个需求就是改变表格里面的字段为数量的单元格的数量然后后面的金额就会自动刷新。

    PHY_68
  • 深度学习与强化学习

    随着 DeepMind 公司的崛起,深度学习和强化学习已经成为了人工智能领域的热门研究方向。除了众所周知的 AlphaGo 之外,DeepMind 之前已经使用...

    张戎
  • 扫盲 : 图片的深度认知

    图片是互联网的重要元素之一,各应用各网站基本上都离不开它,以图片作为关键场景的产品一直层出不穷。十年海量请求的技术锤炼,从基础服务到业务深度合作,从基础架构到精...

    TEG云端专业号
  • android加载大图,防止oom

    高效加载大图片 我们在编写Android程序的时候经常要用到许多图片,不同图片总是会有不同的形状、不同的大小,但在大多数情况下,这些图片都会大于我们程序所需要...

    xiangzhihong
  • CVE-2017-11882及利用样本分析

    1.本文由复眼小组ERFZE师傅原创 2.本文略微偏向基础,首先介绍了该漏洞的成因,并且分析了该漏洞在蔓灵花,摩诃草,响尾蛇APT组织用于实际攻击活动中的详细调...

    Gcow安全团队
  • 分布式图片系统

    随着公司的快速发展,公司对外服务的系统在展现形式方面出现了多样化,目前包括Web端和手机端,不同的展现形式由于设备的多样性和设备对网络的依赖程度的不同,在对图片...

    Lucien168
  • Android高效加载大图、多图解决方案,有效避免程序OOM

    高效加载大图片 我们在编写Android程序的时候经常要用到许多图片,不同图片总是会有不同的形状、不同的大小,但在大多数情况下,这些图片都会大于我们程序所需要的...

    用户1158055
  • 2017第三季度移动行业数据报告

    在如今移动设备规模增速明显放缓,移动设备趋于饱和的情况下,移动互联网人口红利基本结束,逐渐演变成对存量设备的争夺。

    旺仔小小鹿 .

扫码关注云+社区

领取腾讯云代金券