Html 在托管站点中进行拖放时不显示图像_Html_Web_Firebug

Html 在托管站点中进行拖放时不显示图像

html web

Html 在托管站点中进行拖放时不显示图像,html,web,firebug,Html,Web,Firebug,我有一个拖放功能，在localhost期间显示图像似乎很好，但当我在托管站点中尝试时，问题就出现了。在firebug中，它似乎也会发出此错误图像损坏或被截断，但当我下载它并在本地主机中重试时，它似乎没有问题。你知道问题出在哪里吗 <?php session_start(); ?> <?php require "menu.php"; ?> <!DOCTYPE HTML> <html> <title>imageload</title

我有一个拖放功能，在localhost期间显示图像似乎很好，但当我在托管站点中尝试时，问题就出现了。在firebug中，它似乎也会发出此错误

图像损坏或被截断

，但当我下载它并在本地主机中重试时，它似乎没有问题。你知道问题出在哪里吗

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


图像加载
#div1{宽度：255px；高度：285px；边框：1px实心#aaaaaa；z索引：1；}
功能装（）
{
document.getElementById（“shirt1”）.style.visibility=“可见”；
document.getElementById（“shirt2”）.style.visibility=“可见”；
document.getElementById（“shirt3”）.style.visibility=“可见”；
}
函数大括号（）
{
document.getElementById（“brace1”）.style.visibility=“可见”；
document.getElementById（“brace2”）.style.visibility=“可见”；
document.getElementById（“brace3”）.style.visibility=“可见”；
}
功能鞋（）
{
document.getElementById（“shoe1”）.style.visibility=“可见”；
document.getElementById（“shoe2”）.style.visibility=“可见”；
document.getElementById（“shoe3”）.style.visibility=“可见”；
}
var x=“waa”；
var y=“waa”；
var z=“waa”；
var shoe=“waa”；
var shirt=“waa”；
var brace=“waa”；
函数AddCart（）
{
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
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（“鞋”，鞋）；
formData.append（“衬衫”，衬衫）；
formData.append（“大括号”，大括号）；
formData.append（“q1”，q1）；
formData.append（“q2”，q2）；
formData.append（“q3”，q3）；
open（“POST”，“adddrag.php”）；
xmlhttp.send（formData）；
}
功能allowDrop（ev）
{
如果（x==“shirt1”| | x==“shirt2”| | x==“shirt3”）
{
document.getElementById（x）.style.visibility=“hidden”；
}
如果（x==“shirt1”&&y==“waa”&&z==“waa”）
{
//这就是你所指的吗？
document.getElementById（'image'）.src=“draugd/d1.jpg”；
}
如果（x==“shirt2”&&y==“waa”&&z==“waa”）
{
document.getElementById（'image'）.src=“draugd/d2.jpg”；
}
如果（x==“shirt3”&&y==“waa”&&z==“waa”）
{
document.getElementById（'image'）.src=“draugd/d3.jpg”；
}
如果（y==“支架1”| | y==“支架2”| | y==“支架3”）
{
document.getElementById（y）.style.visibility=“hidden”；
}
如果（z==“shoe1”| | z==“shoe2”| | z==“shoe3”）
{
document.getElementById（z.style.visibility=“hidden”；
}
如果（x==“shirt1”）
{
shirt=“upload/d1.jpg”；
}
如果（x==“衬衫2”）
{
shirt=“upload/d2.jpg”；
}
如果（x==“衬衫3”）
{
shirt=“upload/d3.jpg”；
}
如果（y==“大括号1”）
{
brace=“upload/b1.jpg”；
}
如果（y==“括号2”）
{
brace=“upload/b2.jpg”；
}
如果（y==“大括号3”）
{
brace=“upload/b3.jpg”；
}
如果（z==“shoe1”）
{
shoe=“upload/s1.jpg”；
}
如果（z==“shoe2”）
{
shoe=“upload/s2.jpg”；
}
如果（z==“shoe3”）
{
shoe=“upload/s3.jpg”；
}
ev.preventDefault（）；
}
功能阻力（ev）
{
如果（ev.target.id==“shirt1”| | ev.target.id==“shirt2”| | ev.target.id==“shirt3”）
{
x=ev.target.id；
}
如果（ev.target.id==“brace1”| | ev.target.id==“brace2”| | ev.target.id==“brace3”）
{
y=ev.target.id；
}
如果（ev.target.id==“shoe1”| | ev.target.id==“shoe2”| | ev.target.id==“shoe3”）
{
z=ev.target.id；
}
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
添加到购物车
连衣裙
鞋
手链

听起来您的图像链接是针对本地环境硬编码的。您可能需要使路径根相对，以便其链接独立于部署环境。您正在运行什么服务器操作系统？您的代码在哪里供我们查看？

好的，我已经编辑了我的问题，我还对您所指的代码进行了注释。或者是。如果是……这有什么问题？谢谢。问题是这样的代码：如果（x==“shirt1”）{shirt=“upload/d1.jpg”}将站点部署到其他环境时，链接不再有效。您需要使它与根相对。有关如何执行此操作的示例，请查看此链接：