`

多图片上传预览

笔记随笔常见特效 
阅读更多

经常遇到图片上传预览，这里分享个

两种形式------多张图片预览

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="../lib/jquery/jquery.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: 142px;
        }
        .close,
        .close1 {
            color: red;
            position: absolute;
            left: 170px;
            top: 0px;
            display: none;
        }





    </style>
</head>

<body>
<div id="img">
    <div class="imgbox">
        <div class="imgnum">
            <input type="file" class="filepath" />
            <span class="close">X</span>
            <img src="" class="img2" />
        </div>
    </div>
    <div class="imgbox">
        <div class="imgnum">
            <input type="file" class="filepath" />
            <span class="close">X</span>
            <img src="" class="img2" />
        </div>
    </div>
    <div class="imgbox">
        <div class="imgnum">
            <input type="file" class="filepath" />
            <span class="close">X</span>
            <img src="" class="img2" />
        </div>
    </div>
    <div class="imgbox">
        <div class="imgnum">
            <input type="file" class="filepath" />
            <span class="close">X</span>
            <img src="" class="img2" />
        </div>
    </div>
    <div class="imgbox">
        <div class="imgnum">
            <input type="file" class="filepath" />
            <span class="close">X</span>
            <img src="" class="img2" />
        </div>
    </div>
    <div class="imgbox">
        <div class="imgnum">
            <input type="file" class="filepath" />
            <span class="close">X</span>
            <img src="" class="img2" />
        </div>
    </div>



    <!--蓝框是自动在后面添加添加图片框-->
<div class="imgbox1">
        <div class="imgnum">
            <input type="file" class="filepath1" />
            <span class="close1">X</span>
            <!--<img src="btn.png" class="img11" />-->
<img src="" class="img22" />
        </div>
    </div>

</div>

</body>
<script type="text/javascript">
    $(document).ready(function () {
        $(".filepath").on("change",function() {
            alert($('.imgbox').length);
            var srcs = getObjectURL(this.files[0]);   //获取路径
$(this).nextAll(".img1").hide();   //this指的是input
$(this).nextAll(".img2").show();  //fireBUg查看第二次换图片不起做用
$(this).nextAll('.close').show();   //this指的是input
$(this).nextAll(".img2").attr("src",srcs);    //this指的是input
$(this).val('');    //必须制空
$(".close").on("click",function() {
                $(this).hide();     //this指的是span
$(this).nextAll(".img2").hide();
                $(this).nextAll(".img1").show();
            })
        })
    })



    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }
        return url
};





    $(function() {
        $("#img").on("change",".filepath1",function() {
            //alert($('.imgbox1').length);
var srcs = getObjectURL(this.files[0]);   //获取路径
alert(srcs);
            //this指的是input
            /* $(this).nextAll(".img22").attr("src",srcs);    //this指的是input
             $(this).nextAll(".img22").show();  //fireBUg查看第二次换图片不起做用*/
var htmlImg='<div class="imgbox1">'+
                '<div class="imgnum1">'+
                '<input type="file" class="filepath1" />'+
                '<span class="close1">X</span>'+
                '<img src="btn.png" class="img11" />'+
                '<img src="'+srcs+'" class="img22" />'+
                '</div>'+
                '</div>';

            $(this).parent().parent().before(htmlImg);
            $(this).val('');    //必须制空
$(this).parent().parent().prev().find(".img11").hide();   //this指的是input
$(this).parent().parent().prev().find('.close1').show();

            $(".close1").on("click",function() {
                $(this).hide();     //this指的是span
$(this).nextAll(".img22").hide();
                $(this).nextAll(".img11").show();
                if($('.imgbox1').length>1){
                    $(this).parent().parent().remove();
                }

            })
        })
    })

</script>

</html>

 

 

 

 

 

.

分享到：
| 仿UC浏览器错误页面建筑升起降落效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery带删除功能多图片上传预览插件

    **jQuery带删除功能多图片上传预览插件详解** 在Web开发中，用户常常需要上传图片，特别是社交媒体、电子商务和内容管理系统等应用。为了提供更好的用户体验，开发人员通常会使用前端预览技术，让用户在正式上传...

    多图片上传预览插件

    在IT领域，多图片上传预览插件是网站或应用程序中常见的一种功能，它允许用户在上传图片到服务器之前进行在线预览。这样的插件极大地提升了用户体验，因为用户可以在正式提交之前检查图片的质量、方向和效果。下面...

    多图片上传预览控件

    在IT领域，图片上传预览控件是一种常见的用户界面组件，尤其在网页设计和开发中。这个组件允许用户选择并预览多张图片，提升用户体验，确保他们在上传之前能够查看和确认图片的质量和效果。本篇文章将深入探讨“多...

    html5多图片上传预览

    在多图片上传预览中，用户选择的图片文件可以通过FileReader的`readAsDataURL`方法转化为数据URL，然后显示在页面上。 2. **多图选择**：HTML5的`&lt;input type="file"&gt;`元素支持`multiple`属性，当设置此属性时，...

    最强图片多选上传示例 可多次多选择可删除可预览 jQuery+Ashx 异步上传

    最强图片上传示例 可多次多选择可删除可预览 jQuery+Ashx 异步上传 史上最强图片上传示例。...项目开发中整理后分享出来，预览功能参考了“jQuery带删除功能多图片上传预览插件”。 整理及上传时间 2018.10.24

    ajax多图片上传预览

    "Ajax多图片上传预览"技术就是为了解决这个问题，它允许用户在真正提交图片到服务器之前进行预览，无需等待整个文件上传完成。这种功能极大地提升了用户体验，因为它减少了用户的等待时间，并且在上传过程中提供了...

    html5实现多图片上传预览（源码，已测试）

    在多图片上传预览中，我们通常会使用FileReader接口来读取图片文件，并将其转换为可以在浏览器中显示的数据URL。通过调用FileReader的readAsDataURL方法，我们可以将图片文件内容转化为Base64编码的字符串，这个字符...

    aps.net+flash 多图片上传预览

    【标题】：“APS.NET+Flash 多图片上传预览”技术详解 在ASP.NET开发中，实现用户在网页上预览并多张上传图片是一项常见的功能。本示例结合了Flash技术，使得用户可以在上传图片前进行预览，提高了用户体验。在VS...

    jQuery图片批量上传支持多图片上传预览插件.zip

    本文将深入探讨标题为"jQuery图片批量上传支持多图片上传预览插件"的相关知识点，帮助开发者理解和实现这一功能。 一、jQuery库的优势 jQuery的核心理念是“Write Less, Do More”，它通过封装JavaScript常用操作...

    基于mvc的多图片上传预览

    在.NET MVC框架中实现多图片上传预览是一项常见的需求，特别是在构建富交互式的Web应用时。这个项目的核心是利用ASP.NET MVC的控制器、视图和模型（MVC模式）来处理用户上传的多张图片，并在上传前进行预览。jQuery...

    java实现jQuery带删除功能多图片上传预览插件

    在IT行业中，开发一个带有删除功能的多图片上传预览插件是常见的需求，尤其是在Web应用中。这个项目是基于Java后端技术和jQuery前端库实现的，提供了用户友好的图片上传体验。以下是对这个项目的一些关键知识点的...

    jquery 多图片上传预览

    标题中的“jquery 多图片上传预览”指的是使用jQuery库实现的一个功能，允许用户在上传多张图片前进行预览。这个功能在Web应用中非常常见，尤其在社交媒体、电子商务或者个人博客等需要用户上传图片的场景下。jQuery...

    jquery图片上传预览插件支持多图片上传预览代码

    在本文中，我们将深入探讨如何使用jQuery实现一个支持多图片上传预览的插件。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务，因此非常适合用于构建用户友好的图片上传预览功能。...

    jQuery多图片上传预览代码

    在"jQuery多图片上传预览代码"这个资源中，我们主要探讨的是如何利用jQuery实现一个功能，允许用户在上传多张图片之前进行预览。这种功能在现代网页应用中非常常见，例如社交媒体平台、电商网站等，它提高了用户体验...

    jQuery多图片上传预览特效.zip

    【jQuery多图片上传预览特效】是一个基于JavaScript库jQuery实现的功能模块，主要用于网页中的图片上传预览和管理。这个特效支持用户一次性选择多张图片进行上传，并且在上传之前可以实时预览图片效果，增加了用户...

    82、jQuery支持多图片上传预览代码

    本篇文章将深入探讨如何使用jQuery实现多图片上传预览功能，这在现代网页应用中是一个常见的需求，尤其在社交媒体、电商网站和个人博客等场景下。 首先，多图片上传预览的核心原理是利用HTML5的File API来读取用户...

    强大的jQuery多图片上传预览代码.zip

    标题中的“强大的jQuery多图片上传预览代码”指的是一个基于jQuery的前端开发工具或插件，它能够实现用户在上传多张图片前进行预览的功能。这个功能在现代网页设计中非常常见，尤其是在社交媒体、电商网站和个人博客...

    jQuery带删除功能多图片上传预览插件.rar

    本资源"jQuery带删除功能多图片上传预览插件.rar"是一个基于jQuery实现的插件，专为网页中的多图片上传和预览提供便捷的解决方案。这个插件支持用户一次性上传多达5张图片，并且具备图片预览和删除功能，为网站的...

Magicbox
Global site tag (gtag.js) - Google Analytics