将输入文件显示为背景？

Question

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

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

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

Answer 1

你不能。您正在预先加载的页面上传图像。 DOM已经构建完成。如果要在客户端操作后更改DOM，则需要使用一些客户端代码。 使用Jquery.css（）方法更改body：background

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

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

如果您想要让用户发送后台文件，您也可以使用服务器端语言来处理文件中的数据。将操作放置到php函数，该函数将文件名更改为“background.jpg”，例如在主体上命名的位置：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=或类似内容触发。

注意：我没有测试过这一点，因为我在工作。虽然你需要根据自己的需要改变它。