Question

我正在创建一个图像库，其中包含用户通过选择下载多个图像的工具。下载结果应该是一个zip文件。我有一个复选框来选择我的图像现在我无法计算如何下载它们。选择我们需要点击选择按钮并检查所需图像的图像，然后下载按钮应该执行下载操作。我想用javascript执行下载请！！帮助我。

＆＃13;

$(document).ready(function () {
            $('#image-album img').click(function () {
                var link =$(this).attr('src');
                var nextImage=$(this).next().attr('src'); 
                var prevImage=$(this).prev().attr('src');
                $('#imagepreview').attr('src',link);
                $('#exampleModal').modal('show');
                var nextImage=$(this).next().attr('src');
            });
        });
        $( "#selectbtn" ).click(function() {
            var state = $(".custom-checkbox").css("visibility");
            if(state==='visible'){
                state='hidden';
            }
            else{
                state='visible';
            }
            $(".custom-checkbox").css('visibility',state);  
        });

＆＃13;

#image-album img{
                max-height: 200px;
                max-width: 200px;
            }   
            .custom-checkbox{
                visibility: hidden;
            }

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="col-11 py-4">
        <button class="btn btn-primary float-right ml-2" id="downloadbtn">Download</button>
        <button class="btn btn-primary float-right" id="selectbtn">Select</button>
    </div><br>
    <span id="image-album">  
        <input type="checkbox" class="custom-checkbox" value="https://images.pexels.com/photos/271632/pexels-photo-271632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
        <img src="https://images.pexels.com/photos/271632/pexels-photo-271632.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img-thumbnail" data-toggle="modal" data-target="#exampleModal">
        <input type="checkbox" class="custom-checkbox" value="https://images.pexels.com/photos/276696/pexels-photo-276696.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
        <img src="https://images.pexels.com/photos/276696/pexels-photo-276696.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img-thumbnail" data-toggle="modal" data-target="#exampleModal">
        <input type="checkbox" class="custom-checkbox" value="https://images.pexels.com/photos/271805/pexels-photo-271805.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
        <img src="https://images.pexels.com/photos/271805/pexels-photo-271805.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img-thumbnail" data-toggle="modal" data-target="#exampleModal">
        <input type="checkbox" class="custom-checkbox" value="https://images.pexels.com/photos/271724/pexels-photo-271724.jpeg?auto=compress&cs=tinysrgb&h=350">
        <img src="https://images.pexels.com/photos/271724/pexels-photo-271724.jpeg?auto=compress&cs=tinysrgb&h=350" class="img-thumbnail" data-toggle="modal" data-target="#exampleModal">
        <input type="checkbox" class="custom-checkbox" value="https://images.pexels.com/photos/276599/pexels-photo-276599.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
        <img src="https://images.pexels.com/photos/276599/pexels-photo-276599.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img-thumbnail" data-toggle="modal" data-target="#exampleModal">
        <input type="checkbox" class="custom-checkbox" value="https://images.pexels.com/photos/276599/pexels-photo-276599.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
        <img src="https://images.pexels.com/photos/276599/pexels-photo-276599.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img-thumbnail" data-toggle="modal" data-target="#exampleModal">
        <input type="checkbox" class="custom-checkbox" value="https://images.pexels.com/photos/276599/pexels-photo-276599.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
        <img src="https://images.pexels.com/photos/276599/pexels-photo-276599.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img-thumbnail" data-toggle="modal" data-target="#exampleModal">
    </span>     

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                        <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
                </div>
            </div>
        </div>
    </div>

＆＃13;

Answer 1

我为你创造了一个小提琴 See working example here

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="col-11 py-4">
        <button class="btn btn-primary float-right ml-2" id="downloadbtn">Download</button>
        <button class="btn btn-primary float-right" id="selectbtn">Select</button>
    </div><br>
    <span id="image-album">  
        <input type="checkbox" class="custom-checkbox" value="https://s31.postimg.cc/t6p5hyfsb/pexels-photo-271632.jpg">
        <img src="https://s31.postimg.cc/t6p5hyfsb/pexels-photo-271632.jpg" class="img-thumbnail" data-toggle="modal" data-target="#exampleModal">

        <input type="checkbox" class="custom-checkbox" value="https://s31.postimg.cc/eni0gq24r/pexels-photo-276696.jpg">
        <img src="https://s31.postimg.cc/eni0gq24r/pexels-photo-276696.jpg" class="img-thumbnail" data-toggle="modal" data-target="#exampleModal">

         <input type="checkbox" class="custom-checkbox" value="https://s31.postimg.cc/a2vu1hd6z/pexels-photo-271724.jpg">
        <img src="https://s31.postimg.cc/a2vu1hd6z/pexels-photo-271724.jpg" class="img-thumbnail" data-toggle="modal" data-target="#exampleModal">

         <input type="checkbox" class="custom-checkbox" value="https://s31.postimg.cc/kcy90qq7v/pexels-photo-276599.jpg">
        <img src="https://s31.postimg.cc/kcy90qq7v/pexels-photo-276599.jpg" data-toggle="modal" data-target="#exampleModal">    

    </span>     

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                        <img src="" id="imagepreview" style="width: 400px; height: 264px;" >
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
                </div>
            </div>
        </div>
    </div>

Javascript代码：

var Promise = window.Promise;
if (!Promise) {
    Promise = JSZip.external.Promise;
}
function urlToPromise(url) {
    return new Promise(function(resolve, reject) {
        JSZipUtils.getBinaryContent(url, function (err, data) {
            if(err) {
                reject(err);
            } else {
                resolve(data);
            }
        });
    });
};
/**
 * Reset the message.
 */
function resetMessage () {
    $("#result")
    .removeClass()
    .text("");
}
/**
 * show a successful message.
 * @param {String} text the text to show.
 */
function showMessage(text) {
    resetMessage();
    $("#result")
    .addClass("alert alert-success")
    .text(text);
}
/**
 * show an error message.
 * @param {String} text the text to show.
 */
function showError(text) {
    resetMessage();
    $("#result")
    .addClass("alert alert-danger")
    .text(text);
}
/**
 * Update the progress bar.
 * @param {Integer} percent the current percent
 */
function updatePercent(percent) {
    $("#progress_bar").removeClass("hide")
    .find(".progress-bar")
    .attr("aria-valuenow", percent)
    .css({
        width : percent + "%"
    });
}

if(!JSZip.support.blob) {
    showError("This demo works only with a recent browser !");
    return;
}
$(document).ready(function () {


            $('#image-album img').click(function () {
                var link =$(this).attr('src');
                var nextImage=$(this).next().attr('src'); 
                var prevImage=$(this).prev().attr('src');
                $('#imagepreview').attr('src',link);
                $('#exampleModal').modal('show');
                var nextImage=$(this).next().attr('src');
            });
            $( "#selectbtn" ).click(function() {
            var state = $(".custom-checkbox").css("visibility");
            if(state==='visible'){
                state='hidden';
            }
            else{
                state='visible';
            }
            $(".custom-checkbox").css('visibility',state);  
        });
        $( "#downloadbtn" ).click(function() {
            var zip = new JSZip();
            $('#image-album').find(":checked").each(function () {
        var $this = $(this);
        var url = $this.val();
        var filename = url.replace(/.*\//g, "");
        zip.file(filename, urlToPromise(url), {binary:true});
       });
       // when everything has been downloaded, we can trigger the dl
    zip.generateAsync({type:"blob"}, function updateCallback(metadata) {
        var msg = "progression : " + metadata.percent.toFixed(2) + " %";
        if(metadata.currentFile) {
            msg += ", current file = " + metadata.currentFile;
        }


    })
    .then(function callback(blob) {

        // see FileSaver.js
        saveAs(blob, "example.zip");


    }, function (e) {
        showError(e);
    });

        });
        });

通过使用javascript创建批处理，从图库中一次下载多个图像

1 个答案: