问Javascript图片上传，需要嵌入说明
EN

Stack Overflow用户

提问于 2016-04-14 02:28:57

回答 1查看 59关注 0票数 0

我试图做的主要事情是让这个简单的图像上传器也允许用户输入和存储描述与上传的图像一起。还有一些方法来清除存储的图像，一旦它们在预览中。

我目前所拥有的是

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

如果您能提供任何帮助，我们将不胜感激！

javascript

jquery

html

回答 1

Stack Overflow用户

发布于 2016-04-14 03:21:07

要获取描述，只需在表单中创建另一个input元素。您的代码没有显示您实际是如何上传图像的。所以我猜这是一个带有后期动作的表单？

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36606654

复制

相似问题

问Javascript图片上传，需要嵌入说明
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript图片上传，需要嵌入说明EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript图片上传，需要嵌入说明
EN