我有一个简单的图片上传，它会进入页面 index.php上的<form ...action="up.php">
<input type="file" value="" name="file" id="file">
<iframe style="" id="upload_target" name="upload_target"</iframe>
</form>
：
<?php
...
move_uploaded_file($tmp_name, "$path");
...
list($test_width, $test_height) = getimagesize($path);
?>
使用PHP
上传 up.php 图像。iframe现在我想在guillotine中显示图片并允许使用<?php
if($test_width>0) {
?>
<div id="theparent" style="width: 100%;border:0px solid #000;">
<img id='tempImage2' src='<?php echo $path;?>'>
</div>
进行裁剪（仍 up.php ）：
guillotine直到这里它起作用，但<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
}
?>
现在做了导致图像不显示的事情。下一部分来自Guillotine Crop：
iframe当我重新加载$test_width>0时，会显示图像。这让我相信图像在想要显示时没有加载？但我认为首先加载PHP，当文件存在时加载JavaScript（ <script data-require="jsplumb@*" data-semver="1.7.2" src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js
）。
答案 0 :(得分：0)
您的代码中有一些奇怪的东西，您要为同一图像实例化插件两次。 picture和otherPicture实际上是相同的DOM元素。这肯定是问题的一个来源。
除此之外，第一个实例的代码似乎是正确的，正确包装在图片的onload事件的回调中。请注意，如果图像在绑定到onload事件（例如缓存图像）之前完成加载，则不会执行回调。
另外，为避免iframe的复杂化，您可能需要使用Bifrost之类的内容。当HTML5功能不受支持且没有Flash时，它会将jQuery的ajax扩展为异步上传文件。
在后台它创建并为您处理 iframe ，所以基本上它会是相同的但这样你就可以将断头台保留在主框架而不是在iframe内部。
希望它有所帮助。