js上传图片并预览

最新推荐文章于 2021-12-28 09:21:07 发布
最新推荐文章于 2021-12-28 09:21:07 发布
阅读量135 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：https://my.oschina.net/u/3147332/blog/807114
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>By：DragonDean</title>
    <script type="text/javascript">
    //下面用于图片上传预览功能
    function setImagePreview(avalue) {
        var docObj = document.getElementById("doc");

        var imgObjPreview = document.getElementById("preview");
        if (docObj.files && docObj.files[0]) {
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '150px';
            imgObjPreview.style.height = '180px';
            //imgObjPreview.src = docObj.files[0].getAsDataURL();

            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        } else {
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag");
            //必须设置初始大小
            localImagId.style.width = "150px";
            localImagId.style.height = "180px";
            //图片异常的捕捉，防止用户修改后缀来伪造图片
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch (e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
    </script>
</head>

<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td height="101" align="center">
                    <div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;">
                    </div>
                </td>
            </tr>
            <tr>
                <td align="center" style="padding-top:10px;">
                    <input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();">
                </td>
            </tr>
        </tbody>
    </table>
</body>

</html>

 

转载于:https://my.oschina.net/u/3147332/blog/807114

chengweng2602
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html输入框自定义图片,图片input框自定义样式及前端回显
weixin_32486581的博客
06-04 1782
前言在实际项目中，经常需要用户选择图片以便后续的上传，这时要用到Html的input,并将其type设置为file。原生的input上传图片按钮通常无法符合设计稿，我的做法是将其透明度设置为0，再把宽度高度设置为100%。除此之外，通常还需要前端回显图片，重新选择图片。这里用到FileReader类。原生的选择框：理想的选择框：图片回显及重新选择：基础框架vue + elementUI，这里使用v...
用JavaScript实现图片上传并预览，web前端开发规范手册
最新发布
2401_84092360的博客
04-06 700
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-trhtg7Ma-1712378711278)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载。
上传头像（转）
weixin_30654583的博客
09-01 82
总算找到能用的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <...
JavaScript零基础入门 11：JavaScript实现图片上传并预览
学Java，找哪吒
12-28 8105
一、前端界面是通过jqgrid展示的 jqgrid是典型的B／C架构（浏览器／服务器模式），服务器端只需提供数据管理，浏览器只需负责数据显示。 jqGrid是用ajax实现对请求和响应的处理，支持局部实时刷新。 二、jqgrid特性 1、通过配置url地址数据显示格式 2、支持行编辑，列搜索过滤 3、支持分页 4、添加表单支持文件上传 5、链式调用 三、代码实例 1、jqgrid页面展示 $(document).ready(function () { $("#gridTable").jqGrid({
js 实现图片上传预览效果（支持多张预览）
态度决定一切
09-21 2699
案例一： 1.效果图： 2.源码： <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src=...
php input type file,input type=file 选择图片并且实现预览效果详解
weixin_39674190的博客
03-10 526
本文主要为大家带来一篇input type=file 选择图片并且实现预览效果的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。通过标签，给它指定type类型为file，可提供文件上传；accept：可选择上传类型，如：只要传图片，且不限制图片格式，为image/*；multiple：规定是否可以选择多个文件；规定只可上传图片，且可以选择多个文...
js图片上传并预览图片
06-24
js 图片上传 并预览图片
js实现图片上传并预览功能
10-18
例如，我们可以创建一个`<div>`作为图片预览区域，并在其中包含一个`<input type="file">`标签，隐藏这个标签并使用CSS将其定位到一个美观的图标之上。这样，用户点击图标时实际上是在触发文件选择。 在预览图片...
js实现上传图片及时预览
10-22
主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下
javascript上传图片前预览图片兼容大多数浏览器
10-26
在JavaScript中实现上传图片前的预览功能是一项常见的需求，特别是在网页表单中，用户在上传图片之前能够看到即将上传的图片效果。这个功能通过利用HTML5的File API以及对不同浏览器的兼容性处理来实现。以下是一个...
js上传图片及预览功能实例分析
10-24
主要介绍了js上传图片及预览功能,实例分析了javascript操作图片上传预览功能的实现方法,需要的朋友可以参考下
js图片上传预览(ImagePreview)
12-03
js开发的兼容ie，ff的图片上传预览小程序，在后台支持下（asp.net）还兼容其他浏览器
【技巧】input选择图片预览
zuncle的博客
03-15 5491
预览效果见下图：HTML代码如下：<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta charset="utf-8" /> </head> <body> <div class="content" style="margin-top:100px;height:200px;"> <
input标签获取图片并展示
峰子的博客
03-31 1万+
之前写过从后台获取项目外的图片并在前端展示时使用的方法是Base64Encoder.encode(byte[] buffer); 但是今天遇到一个问题：但点击input标签选择文件时，得到路径值却是这样C:\fakepath\test.jpg,中间的路径被fakepath代替，分析如下：原因：由于浏览器的安全机制，当我们获取input file的路径时被fakepath代替，隐藏了真实物理路径。 ...
使用input选择图片并预览和上传
qq_31261131的博客
07-23 907
待续~
【转】html之file标签 --- 图片上传前预览 -- FileReader
weixin_30621959的博客
02-06 383
　　记得以前做网站时，曾经需要实现一个图片上传到服务器前，先预览的功能。当时用html的<input type="file"/>标签一直实现不了，最后舍弃了这个标签，使用了其他方式来实现了这个功能。 　　今天无意发现了一个知识点，用html的file标签就能实现图片上传前预览，感觉很棒，记录一下！就是通过file标签和js的FileReader接口，把选择的图片文件调用readA...
input上传图片并预览
热门推荐
PresByter的博客
10-23 9万+
首先说一下input 大家都知道上传文件，图片是通过input 的file进行上传的。 1. 首先是样式 大家都知道input在HTML的代码为 <input type="file">；在页面的样式是不可以更改的，如下图 但是最为一个投机取巧的前端，一切样式都是可以修改的。 效果图如下 代码： <input type="file" n
input框图片预览
weixin_39168678的博客
10-30 938
input框图片预览 效果 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&am
【前端解决方案】input file 上传图片，并实现实时预览
Yuu
11-12 8030
前言 我最近在做自己个人博客的时候，遇到一个前端的问题，就是如何实时预览 input 标签上传的图片。一般的 &lt;input type="file’ /&gt; 标签是不能实现实时预览的。 解决方案 可以通过 file 标签和 js 的 FileReader 接口来实现。 把选择的图片文件调用 readAsDataURL 方法 把图片数据转成 base64 字符串形式显示在页面上 htm...
vue表单中上传图片并预览
05-18
在 Vue 中上传图片并预览的方法如下： 1. 在模板中添加一个文件输入框和一个图片预览框： ```html <template> <div> <input type="file" @change="onFileChange"> <img v-if="imageUrl" :src="imageUrl" alt="Preview Image"> </div> </template> ``` 2. 在 data 中定义一个 imageUrl 变量，用于存储上传图片的地址： ```js export default { data() { return { imageUrl: null } }, methods: { onFileChange(e) { const file = e.target.files[0] this.imageUrl = URL.createObjectURL(file) } } } ``` 3. 在 onFileChange 方法中，通过 URL.createObjectURL 方法将上传的文件转换成一个可预览的地址，并将该地址赋值给 imageUrl 变量。 这样，当用户选择图片后，图片预览框会显示所选图片的缩略图。注意，这里只是预览图片，还需要将图片上传到服务器并保存图片地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值