Javascript 图像上载不显示图像（断头台裁剪）

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

iframe

：

在此之前，它是有效的，但是断头台现在做了一些事情，导致图像无法显示。下一部分来自：

- 
[ ]  
+ 

宽度：
高度：
比例：
角度：

jQuery（函数（）{
变量图片=$（“#tempImage2”）；
picture.on（'load'，function（））{
//初始化插件（使用自定义事件）
图片.断头台（{eventOnChange:'guillotinchange'}）；
//显示初始数据
var data=picture.guillotine（'getData'）；
for（var-key-in-data）{$（'#'+key）.html（data[key]）}
//绑定按钮操作
$（'rotate_left'）。单击（function（）{picture.guillotine（'rotateLeft'）；}）；
$（'rotate_right'）。单击（function（）{picture.guillotine（'rotateRight'）；}）；
$（'fit'）。单击（function（）{picture.guillotine（'fit'）；}）；
$（'zoom#u in'）。单击（函数（）{picture.guillotine（'zoomIn'）；}）；
$（'zoom#u out'）。单击（函数（）{picture.guillotine（'zoomOut'）；}）；
//更新有关变化的数据
图.on（‘断头台更换’）功能（电动汽车、数据、动作）{
data.scale=parseFloat（data.scale.toFixed（4））；
对于（数据中的var k）{$（'#'+k）.html（数据[k]）}
});
});
});
var otherPicture=$（“#tempImage2”）；
其他图片。断头台（{eventOnChange:'guillotinchange'}）；
otherPicture.on（‘断头台更换’，功能（电动汽车、数据、动作）{
});

---

当我重新加载

iframe

时，会显示图像。这让我相信图像在想要显示时没有加载？但是我认为PHP首先加载，当文件存在时加载JavaScript（

$test\u width>0

）。

您的代码中有一些奇怪的地方，您为同一个图像实例化了两次插件

picture

和

otherPicture

实际上是同一个DOM元素。这当然是问题的根源之一

除此之外，第一个实例的代码似乎是正确的，正确地包装在图片的

onload

事件的回调中。请注意，如果图像在绑定到

onload

事件（例如缓存图像）之前完成加载，则不会执行回调

另外，为了避免iFrame的复杂化，您可能需要使用类似于。它扩展了jQuery的

ajax

，在不支持HTML5功能且没有Flash的情况下异步上传文件

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

---

希望有帮助。

您的代码中有一些奇怪的地方，您为同一个图像实例化了两次插件

picture

和

otherPicture

实际上是同一个DOM元素。这当然是问题的根源之一

除此之外，第一个实例的代码似乎是正确的，正确地包装在图片的

onload

事件的回调中。请注意，如果图像在绑定到

onload

事件（例如缓存图像）之前完成加载，则不会执行回调

另外，为了避免iFrame的复杂化，您可能需要使用类似于。它扩展了jQuery的

ajax

，在不支持HTML5功能且没有Flash的情况下异步上传文件

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

---

希望能有所帮助。

似乎它只是不适用于谷歌ChromeSeems它只是不适用于谷歌ChromeThanks，奇怪的事情确实是问题所在。谢谢，奇怪的事情确实是问题所在。

<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
if($test_width>0) {
?>

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

<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
}
?>