gpt4 book ai didi

javascript - 图片上传不显示图片(断头台裁剪)

转载 作者:行者123 更新时间:2023-11-28 07:12:42 25 4
gpt4 key购买 nike

我有一个简单的图像上传,它进入页面index.php上的iframe:

<form ...action="up.php">
<input type="file" value="" name="file" id="file">
<iframe style="" id="upload_target" name="upload_target"</iframe>
</form>

图像是使用 PHP 通过 up.php 上传的:

<?php
...
move_uploaded_file($tmp_name, "$path");
...
list($test_width, $test_height) = getimagesize($path);
?>

现在我想在 iframe 中显示图像并允许使用 guillotine 进行裁剪(仍然是 up.php):

<?php
if($test_width>0) {
?>

<div id="theparent" style="width: 100%;border:0px solid #000;">
<img id='tempImage2' src='<?php echo $path;?>'>
</div>

直到这里它都可以工作,但是guillotine现在做了一些导致图像不显示的事情。下一部分来自Guillotine Crop :

<div id='controls'>
<button id='zoom_out' type='button' title='Zoom out'> - </button>
<button id='fit' type='button' title='Fit image'> [ ] </button>
<button id='zoom_in' type='button' title='Zoom in'> + </button>
</div>

<div style="display:none">
<ul id='data'>
<div class='column'>
<span id='x'></span>
</div>
<div class='column'>
<li>width: <span id='w'></span>
<li>height: <span id='h'></span>
</div>
<div class='column'>
<li>scale: <span id='scale'></span>
<li>angle: <span id='angle'></span>
</div>
</ul>
</div>
</div>

<script src='http://code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='../../jCrop/js/jquery.guillotine.js'></script>
<script type='text/javascript'>
jQuery(function() {
var picture = $('#tempImage2');
picture.on('load', function(){
// Initialize plugin (with custom event)
picture.guillotine({eventOnChange: 'guillotinechange'});

// Display inital data
var data = picture.guillotine('getData');
for(var key in data) { $('#'+key).html(data[key]); }

// Bind button actions
$('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); });
$('#rotate_right').click(function(){ picture.guillotine('rotateRight'); });
$('#fit').click(function(){ picture.guillotine('fit'); });
$('#zoom_in').click(function(){ picture.guillotine('zoomIn'); });
$('#zoom_out').click(function(){ picture.guillotine('zoomOut'); });

// Update data on change
picture.on('guillotinechange', function(ev, data, action) {
data.scale = parseFloat(data.scale.toFixed(4));
for(var k in data) { $('#'+k).html(data[k]); }
});
});
});

var otherPicture = $('#tempImage2');
otherPicture.guillotine({eventOnChange: 'guillotinechange'});
otherPicture.on('guillotinechange', function(ev, data, action){
});

</script>

<?php
}
?>

当我重新加载iframe时,会显示图像。这让我相信图像在想要显示时未加载?但我认为 PHP 首先加载,当文件存在时加载 JavaScript ($test_width>0)。

最佳答案

您的代码中有一些奇怪的地方,您为同一张图像实例化了插件两次。 pictureotherPicture 实际上是同一个 DOM 元素。这肯定是问题的根源之一。

除此之外,第一个实例的代码似乎是正确的,正确地包装在图片的 onload 事件的回调中。请注意,如果图像在绑定(bind)到 onload 事件之前完成加载(例如缓存图像),则不会执行回调。

此外,为了避免 iframe 的复杂性,您可能需要使用类似 Bifrost 的内容。 。它扩展了 jQuery 的 ajax,以便在不支持 HTML5 功能且没有 Flash 的情况下异步上传文件。

在后台,它创建并为您处理iframe,因此本质上它是相同的,但这样您可以将断头台保留在主框架中,而不是在 iframe 内。

希望有帮助。

关于javascript - 图片上传不显示图片(断头台裁剪),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31146025/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com