html - 将输入文件显示为背景？

Question

我想知道如何在 HTML 文档中显示文件输入。

<input type="file">让我选择一个图像文件，但我真的不确定如何在现有的 HTML 结构中使用它？我想用html/css唯一的解决方法在文档中显示选取的图像。这仅用于离线使用/学习目的。

任何建议表示赞赏。谢谢你。

Answer 1

你不能。您正在预加载页面上上传图像。DOM 已经构建好了。如果您想在客户端操作后更改 DOM，您需要使用一些客户端代码。使用 Jquery.css() 方法改变 body:background

@EDIT：另外，为了创建该文件，您需要将该输入放在表单中并提交。

@EDIT2：当您提交html表单时，将触发一个动作（将对表单元素的动作属性值发出http请求，可以是GET或POST）。您可以设置此值或将其留空，大多数浏览器都会向您所在的同一页面发出请求。问题是，文件被发送到服务器并再次加载页面，但您丢失了有关文件的所有信息。

如果您想要让用户发送背景文件，您也可以使用服务器端语言来处理来自文件的数据。将操作放置到将文件名更改为“background.jpg”的 php 函数中，例如在 body:background 中命名的地方

Answer 2

将文件从input普通HTML/CSS转换为背景是不可能的。在这种情况下，您需要使用 Javascript。我建议使用 ActiveX，想法如下：

var oFSO = new ActiveXObject("Scripting.FileSystemObject");
var oCTF = oFSO.CreateTextFile("C:\\myimage.jpg", true);
oCTF.write(document.getElementById("Data").value);
oCTF.Close();

你需要在一个函数中处理这个问题，这将由onclick=你的提交或类似的东西触发。

注意：我没有测试这个位，因为我在工作。尽管无论如何您都需要将其更改为您的需要。