Question

我要做的主要是获取这个简单的图像上传器，以允许用户输入和存储描述以及上传的图像。还有一些方法可以清除存储在预览中的图像。

我目前拥有的是

  <html>
<body>

<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

要获取描述，只需在表单中创建另一个输入元素。您的代码未显示您实际上传图片的方式。所以我猜这是一个带有POST动作的表单？

要清除图像，只需添加一个删除“img”元素的按钮即可。为了便于使用，只需将“imageLoaded”设为全局，然后在按下该按钮时将其从DOM中删除。

Javascript图片上传，需要描述嵌入

1 个答案: