我有一个小的图像大小调整脚本，该脚本可立即提供生成的调整大小的图像作为下载。如果这是正常情况，而结果内容是在同一页上的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类“ page-load”，其中包含了加载的gif（这样，访问者就知道发生了什么事）。
现在，调整大小过程已完成，访问者可以下载并保存面板。
问题：表单页面已重新加载，但是加载的gif仍然可见。希望那是清楚的。
底线：一旦下载面板出现/图像调整大小后，如何隐藏加载的gif。
第一次更新：此处描述的类似问题已获得投票，但仍未解决。
第二次更新：我仍在寻找答案。我以为这是在公园里散步。严重误会。
我决定为您完成这一步。这是有关如何使用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");
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句