`

jQuery上传图片本地预览

jQuery 
阅读更多
最近用到了图片上传预览，这里我用两种方式展示
①多个可见上传图片框：点击上传框，将图片添加进去；--红色框
②仅有一个上传框，点击添加图片，自动在后面又添加一个上传框；--蓝色框
HTML：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="jquery/jquery.min.js"></script>
<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="imgbox1">
        <div class="imgnum">
            <input type="file" class="filepath1" />
            <span class="close1">X</span>
            <img src="" class="img22" />
        </div>
    </div>
</div>
</body>
</html>
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;}
 
JS：
$(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();
                }

            })
        })
    })
 扩展：这里用到了许多jQuery选择器和属性设置
 
 
分享到：
| 前端模块化
评论
发表评论

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

相关推荐

    jquery 上传图片本地预览

    本教程将详细讲解如何利用jQuery实现一个图片上传时的本地预览功能，同时具备等比例缩放和文件类型判断的能力，并确保在主流浏览器如IE、Firefox和Chrome中运行良好。 首先，我们要理解`jquery 上传图片本地预览`这...

    jquery 本地上传图片预览Demo

    虽然本地预览提供了良好的用户体验，但需要注意安全问题。Base64编码的图片数据可能会暴露用户硬盘上的敏感信息。因此，确保只预览用户预期上传的图片，避免其他文件类型的滥用。 5. **性能优化**： 对于大尺寸...

    jQuery点击头像上传本地预览裁剪图片

    在IT领域，尤其是在Web开发中，用户界面的交互性至关重要，而"jQuery点击头像上传本地预览裁剪图片"就是一个提升用户体验的经典案例。这个功能允许用户在上传头像前预览并裁剪图片，提高了上传过程的可控性和便捷性...

    jquery图片上传前预览 无需上传至服务器

    总结来说，"jquery图片上传前预览 无需上传至服务器"这一技术方案利用了jQuery、HTML5的File API和Canvas等技术，实现了图片的本地预览和剪切，提高了用户交互的便捷性和效率，同时也减轻了服务器的压力。...

    Jquery 表单验证+本地图片上传-切割-预览

    在本项目中，"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例，它涵盖了几个重要的JavaScript库和技术，包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释：...

    jquery上传图片预览

    本文将深入探讨“jQuery上传图片预览”这一主题，这在Web开发中是一个常见且实用的功能，特别是在用户需要在提交之前查看上传图片效果的场景。 首先，我们需要了解jQuery中的`&lt;input type="file"&gt;`元素。这个HTML...

    jquery上传图片并预览

    - 可以添加一个`&lt;img&gt;`标签用于预览图片，初始状态下可以设置为隐藏，当有图片被选中时显示。 2. **jQuery事件**： - 使用`change`事件监听文件输入框的变化，当用户选择了一个文件后触发。 - 在事件处理函数中...

    jQuery H5移动端图片预览插件

    在这个背景下，"jQuery H5移动端图片预览插件"应运而生，它旨在解决移动端图片预览的问题，为用户提供流畅、高效且自适应的图片浏览体验。 这款插件主要针对手机和平板等移动设备设计，它能够无缝地集成到你的H5...

    jquery;图片上传;图片上传预览

    在这个主题中，我们将探讨如何使用纯jQuery实现图片上传预览，不依赖任何外部插件。 首先，我们需要了解HTML中的`&lt;input type="file"&gt;`元素，它是用于让用户选择本地文件的。通过监听此元素的`change`事件，我们...

    jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐

    jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8，而且chrome 火狐最新版本也有问题，自己动手丰衣足食。分享给给大家。

    jQuery实现的上传图片本地预览效果简单示例

    本文介绍的知识点将围绕如何使用jQuery来实现图片上传并进行本地预览这一主题展开，详细说明了页面元素属性的动态操作技巧。 知识点一：理解jQuery与文件上传 jQuery是一个快速、小巧、功能丰富的JavaScript库。它...

    strut2 jquery上传 图片预览 截取图片大小

    在“上传头像预览选择图片大小”的实践中，一般会有一个步骤是让用户选择图片后，先预览图片，然后可以选择调整图片的大小，以满足特定的尺寸要求。这个过程中，用户可以自由移动裁剪框，选择合适的部分，最后保存...

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

    这个项目是基于Java后端技术和jQuery前端库实现的，提供了用户友好的图片上传体验。以下是对这个项目的一些关键知识点的详细解释： 1. **jQuery**: jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、...

    基于jquery实现图片上传本地预览功能

    通过以上步骤，我们实现了基于jQuery的图片上传本地预览功能。这个功能不仅提高了用户体验，还减轻了服务器的压力。需要注意的是，由于生成的URL是临时的，当浏览器关闭或刷新时，这些URL将失效。因此，这个预览方法...

    jsp 本地图片上传前的预览

    这里，`imgPreview`是用于展示预览图片的`&lt;img&gt;`标签，其`src`属性设置为`FileReader`的`onload`事件返回的结果，即data URL。 同时，考虑到安全性，应该限制文件大小和类型。例如，我们可以添加一个函数检查文件...

    简单实现jQuery上传图片显示预览功能

    页面的样式使用了.hide类来默认隐藏预览图片，直到图片被正确加载。 页面的主体部分首先展示了一个简单的提示信息“请选择图片文件：JPG/GIF”，这引导用户上传特定格式的图片。然后定义了一个带有id="form0"的表单...

    jquery 上传图片 预览

    源码地址:http://www.oschina.net/code/snippet_1049351_26784

    基于jQuery的多图上传预览代码

    6. 删除图片：在预览图片的右上角添加一个可点击的红叉图标，通常使用CSS定位实现。点击事件处理可以通过jQuery的`.click()`方法来实现，删除图片时清空对应的`&lt;img&gt;`标签或者从数组中移除对应的File对象。 7. ...

    asp.net jquery上传图片

    总结来说，"asp.net jquery上传图片"这个主题涵盖了以下几个关键知识点： 1. ASP.NET基础：了解如何创建Web应用，处理HTTP请求。 2. jQuery与Ajax：利用jQuery简化前端交互，使用Ajax进行无刷新上传。 3. ...

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