Question

我有一个拖放功能，在localhost期间显示图像似乎很好，但是当我在托管网站中尝试它时会出现问题。它似乎也在firebug中发出此错误image corrupt or truncated，但是当我下载它并在localhost中再次尝试时，它看起来很好。知道问题可能是什么？

<?php
session_start();
?>

<?php
require "menu.php";
?>
<!DOCTYPE HTML>
<html>
<title>imageload</title>
<head>
<style type="text/css">
#div1 {width:255px;height:285px;border:1px solid #aaaaaa;z-index:1;}
</style>
<script>


function dress()
{
document.getElementById("shirt1").style.visibility = "visible";
document.getElementById("shirt2").style.visibility = "visible";
document.getElementById("shirt3").style.visibility = "visible";
}

function braces()
{

document.getElementById("brace1").style.visibility = "visible";
document.getElementById("brace2").style.visibility = "visible";
document.getElementById("brace3").style.visibility = "visible";
}

function shoes()
{
document.getElementById("shoe1").style.visibility = "visible";
document.getElementById("shoe2").style.visibility = "visible";
document.getElementById("shoe3").style.visibility = "visible";
}

var x = "waa";
var y = "waa";
var z = "waa";
var shoe = "waa";
var shirt = "waa";
var brace = "waa";





function AddCart()
{

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("DivAddDrag").innerHTML=xmlhttp.responseText;
    }
  }
var formData = new FormData();
var q1 = document.getElementById("quantity1").value;
var q2 = document.getElementById("quantity2").value;
var q3 = document.getElementById("quantity3").value;


formData.append("shoe", shoe);
formData.append("shirt", shirt);

formData.append("brace", brace);
formData.append("q1", q1);
formData.append("q2", q2);

formData.append("q3", q3);
xmlhttp.open("POST","adddrag.php");
xmlhttp.send(formData);
}


function allowDrop(ev)
{

if(x=="shirt1" || x == "shirt2" || x =="shirt3")
{
document.getElementById(x).style.visibility = "hidden";
}

if(x=="shirt1" && y=="waa" && z=="waa")
{
    // is this what you are referring to? 
document.getElementById('image').src = "dragged/d1.jpg";
}

if(x=="shirt2" && y=="waa" && z=="waa")
{
document.getElementById('image').src = "dragged/d2.jpg";
}

if(x=="shirt3" && y=="waa" && z=="waa")
{
document.getElementById('image').src = "dragged/d3.jpg";
}


if(y=="brace1" || y == "brace2" || y =="brace3")
{
document.getElementById(y).style.visibility = "hidden";

}


if(z=="shoe1" || z == "shoe2" || z =="shoe3")
{
document.getElementById(z).style.visibility = "hidden";
}


if(x=="shirt1")
{
shirt = "upload/d1.jpg";
}
if(x=="shirt2")
{
shirt = "upload/d2.jpg";
}
if(x=="shirt3")
{
shirt = "upload/d3.jpg";
}


if(y=="brace1")
{
brace = "upload/b1.jpg";
}
if(y=="brace2")
{
brace = "upload/b2.jpg";
}
if(y=="brace3")
{
brace = "upload/b3.jpg";
}

if(z=="shoe1")
{
shoe = "upload/s1.jpg";
}
if(z=="shoe2")
{
shoe = "upload/s2.jpg";
}
if(z=="shoe3")
{
shoe = "upload/s3.jpg";
}



ev.preventDefault();
}



function drag(ev)
{
if(ev.target.id == "shirt1" || ev.target.id == "shirt2" || ev.target.id == "shirt3")
{
x = ev.target.id;

}

if(ev.target.id == "brace1" || ev.target.id == "brace2" || ev.target.id == "brace3")
{
y = ev.target.id;
}


if(ev.target.id == "shoe1" || ev.target.id == "shoe2" || ev.target.id == "shoe3")
{
z = ev.target.id;
}

ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{

ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

</script>
</head>
<body>
<?php
require "header.php";
?>

<div id = "wrapper" style="background-color:white; width:1013px; margin-left: auto;margin-right: auto;height:auto;z-index:1100;" >
<?php
if ($_SESSION['users_userName'] == "user")
{
?>



<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="position:relative;top:120px;left:730px;border: 5px solid #032472;height:500px;">
<img id ="image" src = "draggable/d1.jpg" style = "height:500px;width:255px;position:relative;bottom:30px;"/></div>
<?php



echo '<div style = "position:relative;left:50px;bottom:400px;">';
$sql = "select * from draggable Limit 6,3";
$data = mysql_query($sql,$con);
$y = 1;

while($row = mysql_fetch_array($data))
{
$id="shirt".$y;
echo '<img src="'.$row['Drag'].'" id = "'.$id.'" name="shirt" width="85px" height="85px" draggable="true" ondragstart="drag(event)"  onClick="next()" style = "visibility:hidden;"/>';
$y=$y+1;
}


echo '<label> Quantity : </label>';
echo '<input type = "text" id = "quantity1" />';
echo '</br>';


$sql = "select * from draggable Limit 3";
$data = mysql_query($sql,$con);
$y = 1;
while($row = mysql_fetch_array($data))
{
$id="brace".$y;
echo '<img src="'.$row['Drag'].'" id = "'.$id.'" name="brace" width="85px" height="85px" draggable="true" ondragstart="drag(event)"  onClick="next()" style = "visibility:hidden;"/>';
$y=$y+1;
}

echo '<label> Quantity : </label>';
echo '<input type = "text" id = "quantity2" />';

echo'</br>';



$sql = "select * from draggable Limit 3,3";
$data = mysql_query($sql,$con);
$y = 1;
while($row = mysql_fetch_array($data))
{
$id="shoe".$y;
echo '<img src="'.$row['Drag'].'" id = "'.$id.'" name="shoe" width="85px" height="85px" draggable="true" ondragstart="drag(event)"  onClick="next()" style = "visibility:hidden;"/>';
$y=$y+1;
}
echo '<label> Quantity : </label>';
echo '<input type = "text" id = "quantity3" />';
echo'</br>';
echo '</div>';





?>

<button style = "position:relative;bottom:250px;left:30px;" onClick="AddCart()"> Add to Cart</button>
<div style ="position:relative;left:150px;bottom:750px;z-index:1300;">
<button id = "dressclick" onclick = "dress()"> Dress </button>
<button id = "shoeclick" onclick = "shoes()"> Shoes </button>
<button id = "braceclick" onclick = "braces()"> Bracelet </button>
</div>
<div id ="DivAddDrag" style ="position:relative;height:200px;width:500px;left:150px;bottom:400px;border:3px solid black"></div>
<?php
}

?>
<div class="push4">
</div>
</div>
    <div id="footer4" style="margin-left:auto;margin-right:auto;width:1013px;"><?php require "footer.php";?></div>
</body>

</html>

Answer 1

听起来您图像的链接是硬编码的，适合您的本地环境。您可能需要使路径是根相对的，因此其链接与部署环境无关。你在运行什么服务器操作系统？你的代码在哪里可以看到？

在托管站点中拖放期间不显示图像

1 个答案: