Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
​
</style>
</head>
<body style='margin: 30px'>
    <div class="container">
        <div class=moveContainer>
                        <div class='dzq-button-panel ' style=''>
                            <div class='iu-grey-btn'>
                                <a><span class="glyphicon glyphicon-cloud-upload "></span></a>
                                <div class="upload-text">
                                    <h5>Select Files to Upload / Drag and Drop Files</h5>
                                    <p>First image will be product display image</p>
                                </div>
                            </div>
                            <div class='dzq-img-wapp'>
                                <div class='dzq-img-box'>
                                    <span id='firstImgBox' class='addIcon'>+</span>
                                </div>
                            </div>
                            <div class='dzq-img-wapp'>
                                <div class='dzq-img-box'>
                                    <span class='addIcon'>+</span>
                                </div>
                            </div>
                            <div class='dzq-img-wapp'>
                                <div class='dzq-img-box'>
                                    <span class='addIcon'>+</span>
                                </div>
                            </div>
                            <div class='dzq-img-wapp'>
                                <div class='dzq-img-box'>
                                    <span class='addIcon'>+</span>
                                </div>
                            </div>
                            <div class='dzq-img-wapp'>
                                <div class='dzq-img-box'>
                                    <span class='addIcon'>+</span>
                                </div>
                            </div>
​
                        
                        </div>
                    </form:form>
                </div>
            </div>
        </div>
    </div>
​
</body>
</html>
 
.moveContainer {
    padding: 10px 0px 70px 120px;
}
​
.dzq-button-panel {
    position: relative;
    background-color: #e0e0d1;
    border-style: dotted;
    border-color: #C0C0C0;
    border-width: 2px;
    margin: 30px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 120px;
    margin-bottom: 30px;
    border-width: 2px;
}
​
.dzq-img-wapp {
    position: relative;
    background-color: #b3b3b3;
    float: left;
    width: 140px;
    height: 90px;
    padding: 3px;
    margin-right: 10px;
}
​
.dzq-img-wapp:hover {
    position: relative;
    background-color: #C0C0C0;
    float: left;
    width: 140px;
    height: 90px;
    padding: 3px;
    margin-right: 10px;
}
​
.dzq-img-box {
    position: relative;
    float: left;
    width: 134px;
    height: 84px;
    padding-top: 33px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 55px;
    margin-right: 0px;
    background-position: center center;
    background-size: cover;
}
​
.addIcon {
    background: #f2f2f2;
    padding: 10px;
    border-radius: 50%;
}
​
.glyphicon.glyphicon-cloud-upload {
    font-size: 50px;
    position: relative;
    float: left;
    left: 10px;
}
​
.upload-text {
    position: relative;
    left: 25px;
}
​
.iu-grey-btn {
    padding-bottom: 20px;
}
​
.inputfile {
    margin: 0;
    font-size: 50px;
}
​
.glyphicon-remove-circle {
    position: relative;
    margin-top: -20px;
    margin-right: -10px;
    float: right;
    font-size: 20px;
}
​
.glyphicon-remove-circle:hover {
    color: #A00000;
}
​
.select-editable select {
    position: absolute;
    width: 260px;
    height: 34px;
    border: 0;
}
​
.select-editable input {
    position: relative;
    width: 240px;
}
​
.imageError {
    position: relative;
    float: left;
}
 
​
        //single photo upload with box click
        //keyValPImage stores the box image in array
        $(".dzq-img-box ")
                .on(
                        'click',
                        this,
                        function() {
                            $('<input type="file" name="files[]" />')
                                    .click()
                                    .on(
                                            "change",
                                            function(event) {
                                                event
                                                        .stopImmediatePropagation();
                                                var files = !!this.files ? this.files
                                                        : [];
                                                if (!files.length
                                                        || !window.FileReader) {
                                                    return false; // no file selected, or no FileReader support
                                                }
                                                if (/^image/
                                                        .test(files[0].type)) { // only image file
                                                    var reader = new FileReader(); // instance of the FileReader
                                                    reader
                                                            .readAsDataURL(files[0]); // read the local file
                                                    reader.onloadend = function() { // set image data as background of div
                                                        $('.dzq-img-box')
                                                                .each(
                                                                        function(
                                                                                index,
                                                                                element) {
​
                                                                            if ($(
                                                                                    this)
                                                                                    .css(
                                                                                            'background-image') == 'none') {
                                                                                var parentOfboxIsWapp = $(
                                                                                        this)
                                                                                        .parent();
                                                                                var imgBox = $(this);
                                                                                $(
                                                                                        imgBox)
                                                                                        .css(
                                                                                                "background-image",
                                                                                                "url("
                                                                                                        + reader.result
                                                                                                        + ")");
                                                                                imgBox
                                                                                        .children(
                                                                                                '.addIcon')
                                                                                        .hide();
                                                                                $(
                                                                                        "<div></div>")
                                                                                        .addClass(
                                                                                                "glyphicon glyphicon-remove-circle")
                                                                                        .attr(
                                                                                                'id',
                                                                                                'remove')
                                                                                        .prependTo(
                                                                                                parentOfboxIsWapp);
                                                                                parentOfboxIsWapp = null
                                                                                
                                                                                return false;
                                                                            }
                                                                        });
                                                    }
                                                }
                                            });
                        });
​
        //when remove sign is clicked , it removes the current background-image and copy 
        //and paste the next box image if the next box has image
        //removes the keyValPImage stored image
        $('.dzq-img-wapp')
                .on(
                        'click',
                        '#remove',
                        function(e) {
​
                            e.stopPropagation();
                            $(this).siblings().css("background-image", "");
                            $(this).hide();
                            var remove = $(this);
​
                            //copy next box image in it 
                            $('.dzq-img-box')
                                    .each(
                                            function(index, element) {
                                                if ($(this).css(
                                                        'background-image') == 'none') {
                                                    var indexElement = $(
                                                            '.dzq-img-box').eq(
                                                            index + 1).css(
                                                            "background-image");
                                                    $('.dzq-img-box').eq(
                                                            index + 1).css(
                                                            "background-image",
                                                            "");
                                                    var nextRemove = $(
                                                            '.dzq-img-box').eq(
                                                            index + 1)
                                                    nextRemove.siblings(
                                                            "#remove").eq(0)
                                                            .hide();
                                                    $('.dzq-img-box')
                                                            .eq(index)
                                                            .css(
                                                                    "background-image",
                                                                    indexElement);
​
                                                    //var base64_string=img.replace(/"/g,"").replace(/url\(|\)$/ig, "");
                                                    //decodeImg(base64_string);
                                                }
                                            });
​
                            //hides the next box X sign 
                            $('.dzq-img-box')
                                    .each(
                                            function(index, element) {
                                                if (($(this)
                                                        .siblings("#remove")
                                                        .eq(0).is(':hidden'))
                                                        && ($(this)
                                                                .css(
                                                                        'background-image') !== 'none')) {
                                                    var box = $(this).parent()
                                                    $("<div></div>")
                                                            .addClass(
                                                                    "glyphicon glyphicon-remove-circle")
                                                            .attr('id',
                                                                    'remove')
                                                            .prependTo(box);
                                                }
                                                if (($(this).css(
                                                        'background-image') == 'none')
                                                        && ($(this).children()
                                                                .css('display') == 'none')) {
                                                    $(this)
                                                            .children(
                                                                    '.addIcon')
                                                            .show();
                                                }
                                            });
                        });
​
        function dragAndDrop(file){
            $('.dzq-img-box').each(function(index,element){ 
                 if($(this).css('background-image') == 'none'){
                     var box=$(this);   
                     if (/^image/.test(file.type)) { // only image file                    
                        var reader = new FileReader(); // instance of the FileReader
                        reader.readAsDataURL(file); // read the local file
                        reader.onload= function() {
                            $(box).css("background-image","url(" +reader.result + ")");
                            box.children('.addIcon').hide();    
                            $("<div></div>").addClass("glyphicon glyphicon-remove-circle").attr('id','remove').prependTo(box.parent());
                       }
                     }
                     return false;
                 }
            });
        }
        
​
        //Drag and drop input click
        $('.iu-grey-btn').on(
                'click',
                this,
                function() {
                                        $('<input type="file" name="files[]" multiple/>').click().on('change', function(event) {
                                event.stopImmediatePropagation();
                                var files = this.files ? this.files : [];
                                for (var i = 0; i < files.length; i++) {
                                    dragAndDrop(files[i]);
                                }
                            });
                });
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers