用 php 和 javascript 上传图片？答案

【问题标题】：image upload with php and javascript?用 php 和 javascript 上传图片？
【发布时间】：2014-03-01 20:04:02
【问题描述】：

在这方面太新了，正在努力完成学业，但我被困住了..

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

我的问题。我让图片显示在页面上，但如何将其设为缩略图？查询？花式盒子？我还没有掌握如何实现它的窍门。请帮忙！

当前代码是：

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

【问题讨论】：

您的问题得到解答了吗？

标签： javascript php html fancybox

【解决方案1】：

如果您只有图像的副本（原件），则可以使用CSS Dimension Properties 调整图像大小。这个question 展示了如何创建缩略图库。

【讨论】：

【解决方案2】：

没有 php，没有花式框，但这可行：
在正文中插入以下内容：
<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);
// };
使用以下 2 行：
document.getElementById("img1").src = fileLoadedEvent.target.result;
}

【讨论】：