Question

我有一个想法，我不知道如何开始，但我想实现：当我点击一个链接时，我想在灯箱内打开一个div元素，它已经完成了HTML表格，用于将数据插入数据库。现在我知道如何制作必要的表格和字段。表单完成后，当用户点击提交按钮时，我希望现有的div元素消失，并在灯箱中打开一个新的div，告诉用户：数据已成功添加到数据库中。片刻之后关闭灯箱。

我该如何开始这样做？我有导入的链接和灯箱，知道如何使用灯箱。我很感激你的帮助。干杯！

如果您需要更多信息，请告诉我，我将编辑此帖子。

好的，我一整天都在烦恼，并设法让它发挥作用。

jQuery代码：

    <script>
$(document).ready(function() {
$('a.data-window').click(function() {

            //Getting the variable's value from a link 
    var loginBox = $(this).attr('href');

    //Fade in the Popup
    $(loginBox).fadeIn(300);

    //Set the center alignment padding + border see css style
    var popMargTop = ($(loginBox).height() + 24) / 2; 
    var popMargLeft = ($(loginBox).width() + 24) / 2; 

    $(loginBox).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() { 
  $('#mask , .data-popup').fadeOut(300 , function() {
    $('#mask').remove();  
}); 
return false;
});
});
</script>

我做过的表格：

<div id="data-box" class="data-popup">

<h3>Ispunite formu za unošenje proizvoda</h3>

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>" method="post" enctype="multipart/form-data">
<table width="0" border="0" cellspacing="0" cellpadding="2">
  <tr>
    <td>Kategorija:</td>
    <td><select class="select" name="kategorija">
    <option class="option" selected>Odaberite...</option>
    <option class="option" value="Laptop">Laptop</option>
    <option class="option" value="PC">PC</option>
    <option class="option" value="Tablet">Tablet</option>
    <option class="option" value="Periferije">Periferije</option>
    <option class="option" value="Dijelovi">Dijelovi</option>
    <option class="option" value="Audio">Audio</option>
    <option class="option" value="Mobitel">Mobitel</option>
    <option class="option" value="Monitor">Monitor</option>
    <option class="option" value="Televizor">Televizor</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Proizvod:</td>
    <td><select class="select" name="proizvod">
    <option class="option" selected>Odaberite...</option>
    <option class="option" value="Prijenosno Računalo">Prijenosno Računalo</option>
    <option class="option" value="Stolno Računalo">Stolno Računalo</option>
    <option class="option" value="Džepno Računalo">Džepno Računalo</option>
    <option class="option" value="Računalni Dodaci">Računalni Dodaci</option>
    <option class="option" value="Komponente">Komponente</option>
    <option class="option" value="Zvučna Oprema">Zvučna Oprema</option>
    <option class="option" value="Mobilni Uređaji">Mobilni Uređaji</option>
    <option class="option" value="Monitor">Monitor</option>
    <option class="option" value="Televizor">Televizor</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Proizvođač:</td>
    <td><select class="select" name="proizvodac">
    <option class="option" selected>Odaberite...</option>
    <option class="option" value="Acer">Acer</option>
    <option class="option" value="Asus">Asus</option>
    <option class="option" value="Apple">Apple</option>
    <option class="option" value="Dell">Dell</option>
    <option class="option" value="HP">HP</option>
    <option class="option" value="Lenovo">Lenovo</option>
    <option class="option" value="Alienware">Alienware</option>
    <option class="option" value="Sony">Sony</option>
    <option class="option" value="Compaq">Compaq</option>
    <option class="option" value="IBM">IBM</option>
    <option class="option" value="Gateway">Gateway</option>
    <option class="option" value="CyberPower">CyberPower</option>
    <option class="option" value="Alcatel">Alcatel</option>
    <option class="option" value="Amazon">Amazon</option>
    <option class="option" value="Archos">Archos</option>
    <option class="option" value="DataWind">DataWind</option>
    <option class="option" value="FlipKart">FlipKart</option>
    <option class="option" value="Huawei">Huawei</option>
    <option class="option" value="iBall">iBall</option>
    <option class="option" value="Karbonn">Karbonn</option>
    <option class="option" value="Lava">Lava</option>
    <option class="option" value="LG">LG</option>
    <option class="option" value="Micromax">Micromax</option>
    <option class="option" value="Microsoft">Microsoft</option>
    <option class="option" value="Milagrow">Milagrow</option>
    <option class="option" value="Panasonic">Panasonic</option>
    <option class="option" value="Swipe">Swipe</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Model:</td>
    <td><input class="input" type="text" name="model" placeholder="Model"/></td>
  </tr>
  <tr>
    <td>Slika:</td>
    <td><input type="file" name="slika"></td>
  </tr>
  <tr>
    <td>Naziv:</td>
    <td><input class="input" type="text" name="naziv" placeholder="Naziv"/></td>
  </tr>
  <tr>
    <td>Opis:</td>
    <td><textarea class="textarea" name="opis"></textarea></td>
  </tr>
  <tr>
    <td>Cijena:</td>
    <td><input class="input" type="text" name="cijena" placeholder="Cijena"/></td>
  </tr>
  <tr>
  </tr>
</table>

<input class="button" type="submit" name="submit" />
<input class="button" type="reset" value="Reset"/>
</form>

</div>

现在我需要能够从这个表单将数据发送到数据库中，希望避免SQL注入的可能性（我已经阅读了教程，它只会让我更加困惑......）我想我能够自己管理数据插入到数据库中，但这是我想要实现的：有一个输入字段来插入图像。如何将数据上传到数据库，同时将图像上传到文件夹＆＃34; images＆＃34;在我的服务器上，并在一个特殊变量中检索图像的URL（例如：＆＃34; images \ HP ENVY Y700.png＆＃34;）然后在该变量（url）中插入哪些内容数据库中的列（Slika）？此外，当我上传所选图片时，我需要将其剪切为200x200尺寸，这样就会有2张图片将被上传。一个完整大小的.png和另一个200x200 .gif到同一目录中。正如我所说，我需要实际检索两个图像的网址，因为我有div元素显示裁剪后的图像，该图像将是灯箱链接到全尺寸图像。

这可能听起来很混乱，但我试图尽我所能解释。我希望你能理解我在这里想要达到的目标。

单击链接将在灯箱中打开一个新的div元素，其中包含表单

0 个答案: