专栏首页互联网软件技术本地单张图片上传预览

本地单张图片上传预览

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>本地单图上传预览</title>
 9 </head>
10 <style>
11     img {
12         border: 1px solid #000;
13         background-color: #ccc;
14         min-width: 60px;
15         min-height: 60px;
16     }
17 </style>
18 <body>
19 
20 <input type="file" id="upImg" onchange="preImg(this.id,'imgPre');"/>
21 <img id="imgPre" src="" style="display: block;"/>
22 
23 <script>
24     /**
25      * 本地图片预览
26      */
27     // 获取上传文件地址函数
28     function getFileUrl(sourceId) {
29         var url;
30         var elUpload = document.getElementById(sourceId);
31         if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE下的地址
32             url = elUpload.value;
33         }
34         else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox下的地址
35             url = window.URL.createObjectURL(elUpload.files.item(0));
36         }
37         else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome下的地址
38             url = window.URL.createObjectURL(elUpload.files.item(0));
39         }
40         console.log(url);
41         return url;
42     }
43 
44     function preImg(sourceId, targetId) {
45         var imgPre = document.getElementById(targetId);
46         imgPre.src = getFileUrl(sourceId);// 获取地址
47     }
48 </script>
49 </body>
50 </html>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(1)

    wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费

    ProsperLee
  • jQuer插件满屏气泡飘落动画效果

    ProsperLee
  • 生成无重复随机数

    ProsperLee
  • 云计算漏洞威胁 供应商如何保护云计算环境

    云计算关于云计算漏洞的担忧往往会影响客户是否把最重要应用程序迁往云计算的决策。总结出未来安全的五大漏洞为: 第一 、用户接入门户,这里最容易遭到的攻击如下,例如...

    静一
  • 我国云计算市场将有很长一段路要走

    对于我国当前的云计算市场,工业和信息部软件服务业司巡视员李颖认为:我国云计算产业正处在探索阶段,要得到发展就需要统筹规划好各个环节,此外信息安全问题是目前亟待解...

    静一
  • 网站---不要相信浏览器

    1、当提交的时候用。return checkForm() 这个方法。 2、服务器断的代码不可少,JavaScript 校验只是“可用性”考虑,而服务器端的校验才...

    静心物语313
  • Hexo的SEO优化(搜索引擎优化)

    前端博客 : alili.tech
  • 队列的动态链式存储实现—C语言

    汐楓
  • 「newbee-mall新蜂商城开源啦」 前后端分离的 Vue 版本即将开源

    2019 年 10 月份我在 GitHub 开源仓库中上传了新蜂商城项目的所有源码,至今已经有小半年的时间了,感兴趣的可以去了解一下这个 Spring Boot...

    我是十三
  • DX-watermark插件无法预览及上传图片报imagesx()错误的解决办法

    本文重新更新编辑于:2014 年 6 月 8 日 0 时 40 分. 这篇文章还是在 2014 年 2 月 12 日发布的,旧标题为:《不明问题让我折腾了一天!...

    张戈

扫码关注云+社区

领取腾讯云代金券