0

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

我想我需要以某种方式更改或修复的代码，从第 6 行开始，在 JS 代码下方。直到那时它才能正常工作并按预期工作。请注意，我的调整大小脚本完全在 php.ini 中。

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 和调整大小脚本，脚本使用session_start(). 我只是学习php，对JS一点也不熟悉。是的，我也在做自己的搜索、研究和调整。直到现在什么都没有解决。如果您还需要 resize.php 中的代码以获得更好的参考，请告诉我。

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

  1. 访问者单击提交按钮。

  2. 数据被提交到 resize.php，如表单操作标签所示。

  3. 上面的 JS 脚本被触发并显示隐藏的 div 类“page-load”，其中包含加载 gif（因此访问者知道发生了什么事）。

  4. 现在调整大小过程完成，访问者获得下载和保存面板。

  5. ISSUE : 表单页面已重新加载，但加载 gif 仍然可见。希望这很清楚。

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

第一次更新：此处描述的类似问题收集了选票，但仍未解决。

第二次更新：我仍在寻找答案。我以为这会是在公园里散步。大错特错。

4

1 回答 1

2

我决定为你介绍一下。这是有关如何使用 ajax 构建请求的分步指南。

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

包括 PHP 在内的文件包含在目录中 ( http://tomsfreelance.com/stackoverflow/imageDownloadLoading/ )

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

<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";
        }
    }

第四步：制作下载页面。

<?php
        header('Content-Description: File Transfer');
        header("Content-type: application/octet-stream");
        header("Content-disposition: attachment; filename=download.jpg");
        readfile("download.jpg");
于 2013-11-05T05:34:17.567 回答