Question

我有一个小图像大小调整脚本，它会立即提供生成的已调整大小的图像作为下载。如果这是一个正常情况，其中结果内容被加载到同一页面上的div中，则下面的js代码将起作用，就像在我网站的其他部分一样。但这里的情况是输出（调整大小的图像）作为强制下载提供，它显示为下载提示面板，因此下面的代码加载 loading.gif但是隐藏它。因此，loading.gif仍然可见。

我想我需要更改或修复的代码，从JS代码下面的第6行开始。直到那时它功能齐全，并按预期工作。请注意，我的调整大小脚本完全在php中。

JS

<script type="text/javascript">
    jQuery(document).ready(function() {
        var $pageLoad = jQuery('.page-load');
        $pageLoad.hide();
        jQuery('#SubmitButton').on('click', function() {
            $pageLoad.show(100);
        });
//code till here works fine and triggers gif on submit but dunno after this
    //what codes should go here to fadeout or hide the loading gif ?
    //not even sure if this is right approach
    }); 
</script>

HTML ：

<form action="http://xxxxxxxxxxx/wp-content/themes/xxxxx/resize/resize.php" id="UploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="image" />
<input type="submit"  id="SubmitButton" name="SubmitButton" value="Upload" />
</form>

您知道，我在另一个.php页面上使用wordpress cms和resize脚本，脚本使用session_start()。我只是学习php而且根本不熟悉JS。是的我也在进行自己的搜索，研究和调整。到目前为止没有任何事情可做。如果你还需要resize.php的代码以便更好地参考，请告诉我。

为了简单起见，这里是预期序列的简单说明。

访问者点击提交按钮。
数据提交给resize.php，表格操作标记就是明证。
上面的JS脚本被触发并显示隐藏的div类＆＃34; page-load＆＃34;其中包含加载gif（因此访问者知道正在发生的事情）。
现在完成了调整大小过程，访问者获得了下载和保存面板。
问题：表单页面已重新加载，但加载的gif仍然可见。希望很清楚。

底线：如果出现下载面板/图像大小调整后如何隐藏加载gif。

首次更新 ：类似问题described here收集投票但未解决。

第二次更新 ：我仍在寻找答案。我以为这是在公园散步。严重错误。

Answer 1

我决定为你完成这个。以下是有关如何使用ajax构建请求的分步指南。

下面的代码可以在http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php

看到

包含PHP的文件包含在目录（http://tomsfreelance.com/stackoverflow/imageDownloadLoading/）

中

第1步：设置表单。我们暂时保持简单。

<form name="resizeImage">
    <select id="image" onChange="com.demo.updateImage();">
        <option value="img1.jpg">img1.jpg</option>
        <option value="img2.jpg">img2.jpg</option>
        <option value="img3.jpg">img3.jpg</option>
    </select>
    <input type="text" id="tint" placeholder="Tint" onKeyUp="com.demo.updateTint();">
    <input type="button" id="download" value="Download" onClick="com.demo.downloadImage();" />
    <br />

    <img style="max-width: 400px; max-height: 400px;" src="img1.jpg" id="preview">
    <div id="color"></div>
</form>

第2步：添加一些javascript / ajax

<script>
    var com = {};
    com.demo = {};
    com.demo.loading = false;
    com.demo.loadingBox = null;
    com.demo.loadingStage = 1;

    com.demo.updateImage = function() {
        $('#preview').prop('src', $('#image').val());
        com.demo.updateTint();
    }

    com.demo.updateTint = function() {
        $('#color').css( { 
            'width': $('#preview').outerWidth() + 'px', 
            'height': $('#preview').outerHeight() + 'px', 
            'background-color': $('#tint').val(),
            'z-index' : 10,
            'position': 'absolute',
            'left': $('#preview').position().left,
            'top' : $('#preview').position().top,
            'opacity' : 0.4
        });
    }

    com.demo.doLoading = function() {

        if (com.demo.loading) {
            if (com.demo.loadingBox == null) {
                com.demo.loadingBox = $('<div id="loading">Loading</div>').appendTo('body').css({ "position" : "absolute", "width" : "100px", "left" : "50px", "top" : "50px", "border" : "5px solid #000000", "padding" : "10px", "z-index" : "20", "background-color" : "#FFFFFF" });
            }
            else com.demo.loadingBox.css({ 'display' : 'block' });

            com.demo.loadingStage = ++com.demo.loadingStage % 3;
            var string = "Loading";
            for (var x = 0; x < com.demo.loadingStage; x++) {
                string += ".";
            }

            com.demo.loadingBox.text(string);
            setTimeout(function() { com.demo.doLoading(); }, 1000);
        }
        else {
            com.demo.loadingBox.css({ 'display' : 'none' });
        }
    }

    com.demo.downloadImage = function() {
        var data = {};
        data.img = $('#image').val();
        data.tint = $('#tint').val();

        // Show loading box.
        com.demo.loading = true;
        com.demo.doLoading();

        $.post("convert.php", data)
        .done(function(d) {
            com.demo.loading = false;
            document.location.href = d;
        });
    }
</script>

步骤3：制作处理文件的PHP页面。

<?php
    function hex2rgb($hex) {
       $hex = str_replace("#", "", $hex);

       if(strlen($hex) == 3) {
          $r = hexdec(substr($hex,0,1).substr($hex,0,1));
          $g = hexdec(substr($hex,1,1).substr($hex,1,1));
          $b = hexdec(substr($hex,2,1).substr($hex,2,1));
       } else {
          $r = hexdec(substr($hex,0,2));
          $g = hexdec(substr($hex,2,2));
          $b = hexdec(substr($hex,4,2));
       }
       $rgb = array($r, $g, $b);
       //return implode(",", $rgb); // returns the rgb values separated by commas
       return $rgb; // returns an array with the rgb values
    }

    if (isset($_POST['img'])) {
        $im = imagecreatefromjpeg($_POST['img']);
        $color = (empty($_POST['tint'])) ? hex2rgb("#000000") : hex2rgb($_POST['tint']);

        if (imagefilter($im, IMG_FILTER_COLORIZE, $color[0], $color[1], $color[2])) {

            header('Content-Description: File Transfer');
            header("Content-type: application/octet-stream");
            header("Content-disposition: attachment; filename=download.jpg");
            imagejpeg($im, "download.jpg");
            echo "download.php";
        }
    }

第4步：制作下载页面。

<?php
        header('Content-Description: File Transfer');
        header("Content-type: application/octet-stream");
        header("Content-disposition: attachment; filename=download.jpg");
        readfile("download.jpg");

一旦调整大小的图像作为下载提供，隐藏加载GIF

1 个答案: