用php和javascript上传图片？

Question

如此新奇，并试图完成学业，但我被困住了。

这段代码将像这样工作。 用户将能够上传图像，图像将存储在数据库中，缩略图将显示在网站上，并在点击时放大。

我的问题。 我可以将图片显示在页面上，但是如何将其显示为缩略图？ JQuery的？ 的fancybox？ 我没有掌握如何实施它的窍门。 请帮忙！

当前代码是：

<script type='text/javascript'>

function main()
{
var inputFileToLoad = document.createElement("input");
inputFileToLoad.type = "file";
inputFileToLoad.id = "inputFileToLoad";
document.body.appendChild(inputFileToLoad);

var buttonLoadFile = document.createElement("button");
buttonLoadFile.onclick = loadImageFileAsURL;
buttonLoadFile.textContent = "Load Selected File";
document.body.appendChild(buttonLoadFile);
}


function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
    var fileToLoad = filesSelected[0];

    if (fileToLoad.type.match("image.*"))
    {
        var fileReader = new FileReader();
        fileReader.onload = function(fileLoadedEvent) 
        {
            var imageLoaded = document.createElement("img");
            imageLoaded.src = fileLoadedEvent.target.result;
            document.body.appendChild(imageLoaded);
        };
        fileReader.readAsDataURL(fileToLoad);
    }
 }
 }

 main();

 </script>

 </body>
 </html>

Answer 1

如果您只有图像的副本（原始图像），则可以使用CSS Dimension Properties调整图像大小。 此问题显示了如何创建缩略图库。

Answer 2

没有php，没有fancybox，但这有效：
将以下内容插入正文：
<div id="div1">
<img id="img1" height="100px" width="100px" />
</div>
替换以下4行：
// var imageLoaded = document.createElement("img");
// imageLoaded.src = fileLoadedEvent.target.result;
// document.body.appendChild(imageLoaded);
// };
有以下两行：
document.getElementById("img1").src = fileLoadedEvent.target.result;
}