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调整图像大小。这个question显示了如何创建缩略图库。

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

使用php和javascript上传图片？

2 个答案: