input file上传图片预览

最新推荐文章于 2024-06-06 10:36:09 发布
最新推荐文章于 2024-06-06 10:36:09 发布
阅读量3.5w 收藏 14
点赞数 4
分类专栏： web前端学习 文章标签： 图片 input-file 上传预览 自动增加
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/50433863
版权

这里写图片描述
这里写图片描述
这里写图片描述

下载地址http://download.csdn.net/detail/cometwo/9383602

兄弟文章：http://blog.csdn.net/libin_1/article/details/50916704

input file上传图片预览其实很简单，只是没做过的感觉很神奇，今天我就扒下她神秘的面纱，其实原理真的非常非常非常非常非常非常简单！

点击红框是加载显示图片，X号删除，蓝框是自动在后面添加添加图片框，所有的都是原创，代码其实可以更加精简，看终结版文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

    <style type="text/css">
        .imgbox,.imgbox1
        {
            float: left;
            margin-right: 20px;
            margin-top: 20px;
            position: relative;
            width: 182px;
            height: 142px;
            border: 1px solid red;
            overflow: hidden;
        }
        .imgbox1{
    border: 1px solid blue;
        }


        .imgnum{
            left: 0px;
            top: 0px;
            margin: 0px;
            padding: 0px;
        }
        .imgnum input,.imgnum1 input {
            position: absolute;
            width: 182px;
            height: 142px;
            opacity: 0;
        }
        .imgnum img,.imgnum1 img {
            width: 100%;
            height: 100%;
        }
        .close,
        .close1 {
            color: red;
            position: absolute;
            left: 170px;
            top: 0px;
最低0.47元/天 解锁文章
最骚的就是你
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端图片上传那些事儿
HuaZi_Myth的博客
10-29 551
本文讲的图片上传，主要是针对上传头像的。大家都知道，上传头像一般都会分成以下 4 个步骤： 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 接下来，就详细的介绍每个步骤具体实现。 选择图片 选择图片有什么好讲的呢？不就一个 input[type=file] ，然后点击就可以了吗？确实是这样的，但是，我们想要做得更加的友好一些，比如需要过滤掉非图片文件，...
input file读取图片
青阳的博客
07-24 1万+
&lt;input type="file" class="ImageInput" accept="image/*" name="imagefiles"&gt; &lt;img  src=""/&gt; 1.获取File对象 var fileinput = Document.getElementById('id'); var File = fileinput.files[
点击上传图片并显示文件名和图片及获取input file的值和路径
热门推荐
robin_sky的博客
06-28 3万+
原本的input type='file' 样式真的很丑，毫无美感而言，一直想写一个点击图片就显示的界面，现在终于研究出来了。原本的input type='file'样式：改变后的样式：样式代码： &lt;style type="text/css"&gt; .img{opacity:0;} .imgs{border:1px solid #78C3F3;backg...
html 使用input file上传图片并显示
最新发布
lfl18326162160的博客
06-06 468
title>文件上传</title>
input file本地图片预览的方法（兼容IE、Chrome和Firefox）
yippeelyl的专栏
09-16 2万+
input选择图片实现预览本地图片的方法，网上有很多，但是不能很好的兼容多种浏览器，这里找到一个兼容IE6、IE7、IE8和Chrome、firefox等浏览器的代码： input选择图片实现预览本地图片的方法，网上有很多，但是不能很好的兼容多种浏览器，这里找到一个兼容IE6、IE7、IE8和Chrome、firefox等浏览器的代码：                  
JS input file图片上传预览效果
微微一芯的博客
04-21 1957
首先，可以先了解file 和FileReader 的API，在选取一个或者多个文件之后,访问到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。所有type属性(attribute)为file的元素都有一个files属性，用来存储用户所选择的文件。files有一个length属性和item方法，我们可以通过files[index]或者files.item(inde
input file上传 图片预览功能实例代码
09-01
以上就是关于`<input type="file">` 上传图片预览功能的实现原理和实例代码解析。这个功能不仅简化了用户的操作流程，也提高了网页的交互性。在实际开发中，还可以根据需要添加更多细节，如错误处理、图片大小限制...
javascript实现input file上传图片预览效果
11-23
在JavaScript中，实现input file上传图片预览效果是常见的前端功能，...以上就是利用JavaScript实现input file上传图片预览效果的详细过程，这个功能在许多网站的图片上传功能中非常常见，能给用户带来更好的交互体验。
input file选择图片后预览 单图和多图
T_Struggle的博客
12-17 6174
1.单图上传 &lt;input name="icon" type="file" value="" /&gt;&lt;img src="" height="100px"&gt; &lt;script type="text/javascript"&gt; //预览图片 $("[name='icon']").ch
input file上传图片本地预览
FE小白的进化之路
01-22 1086
1. 定义上传控件 &amp;lt;input id=&quot;inputImg&quot; type=&quot;file&quot; accept=&quot;image/png,image/jpeg,image/jpg&quot; onchange=&quot;changeFile(event)&quot;&amp;gt; 2. 本地图片预览 function changeFile(event) { var i
input=“file”上传图片
weixin_30640291的博客
10-18 69
首先说明做这个功能需要用到插件 2个js文件①exif.js ②lrz.min.js 下面是流程 首先页面里面引入两个js文件 <script src="js/exif.js?v=c65d9ea" type="text/javascript"></script><script src="js/lrz.min.js?v=b542f0a" type="text/j...
input上传图片；input上传file；vue上传图片。js读取文件的base64；通过File文件读取base64；
i_am_a_div的博客
02-28 1706
js上传图片；vue上传图片；input上传图片
使用input实现上传图片
qq_41587763的博客
06-22 3915
因为时间缘故(就是懒),所以有些在data里定义的值没有写出来，少值得可以直接评论，我会一一给的。 html片段: <div class="upload-img"> <ul class="upload-lists"> <li v-for="(item, index) in picLists" :key="index"> <img :src="item" ..
input上传文件图片本地预览
qq_39015698的博客
07-03 776
input上传文件图片本地预览
【前端解决方案】input file 上传图片，并实现实时预览
Yuu
11-12 8050
前言 我最近在做自己个人博客的时候，遇到一个前端的问题，就是如何实时预览 input 标签上传的图片。一般的 &lt;input type="file’ /&gt; 标签是不能实现实时预览的。 解决方案 可以通过 file 标签和 js 的 FileReader 接口来实现。 把选择的图片文件调用 readAsDataURL 方法 把图片数据转成 base64 字符串形式显示在页面上 htm...
input file实现文件上传预览
yuqiweb2021的博客
08-02 380
效果 html部分 <div> <div> <label for="file1" class="a-upload" >上传文件 <input type="file" @change="file1($event)" name="file1" id="file1" multiple="multiple...
vue图片上传并预览
09-03
在Vue中实现图片上传并预览的过程如下： 首先，要在Vue项目中使用图片上传功能，需要在组件中添加一个文件上传input元素，并设置其类型为"file"，同时在data中定义一个变量来保存上传的文件对象和预览的图片URL。例如： ``` <input type="file" @change="handleImageUpload"> <img :src="previewImage" v-if="previewImage"> ``` 其次，在methods中，需要定义一个处理图片上传的函数。在函数中，首先获取用户选择的文件，并将其赋值给data中的变量。然后利用FileReader将文件转换成Data URL的形式，以便在浏览器端预览。最后，将转换后的URL保存在data中的变量中，以便在页面上进行预览。例如： ``` handleImageUpload(event) { const file = event.target.files[0]; this.image = file; const reader = new FileReader(); reader.onload = () => { this.previewImage = reader.result; } reader.readAsDataURL(file); } ``` 接下来，在data中定义一个用于保存预览图片的变量previewImage，并将其初值设置为null。这个变量会在上传文件并预览时使用。例如： ``` data() { return { image: null, previewImage: null } } ``` 最后，将上传的文件和预览的图片URL绑定到页面上，以实现图片上传并预览的功能。例如，在input元素中使用@change监听文件选择事件，然后调用handleImageUpload方法进行文件上传和预览。在img元素中使用v-if指令判断预览图片的URL是否存在，如果存在，则显示预览图片。例如： ``` <input type="file" @change="handleImageUpload"> <img :src="previewImage" v-if="previewImage"> ``` 以上就是使用Vue实现图片上传并预览的简单过程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值