使用JavaScript将本地图像上载到Div中？_Javascript_Html_File Upload

使用JavaScript将本地图像上载到Div中？

javascript html file-upload

使用JavaScript将本地图像上载到Div中？,javascript,html,file-upload,Javascript,Html,File Upload,我正在建立一个关于不同的图片帧网站，希望最终用户能够上传到一个div的图像文件，然后将显示在页面上？我做了一把非常基本的小提琴：这个想法是，用户点击上传图像按钮，就会打开一个窗口，让他们能够浏览到想要上传到页面的文件的位置。他们找到文件并选择它。然后，该图片显示在div标记内。这是否可以使用Javascript实现非常感谢您事先提供的任何帮助 <html> <head> <title>Upload Image Help!</title> &

我正在建立一个关于不同的图片帧网站，希望最终用户能够上传到一个div的图像文件，然后将显示在页面上？我做了一把非常基本的小提琴：

这个想法是，用户点击上传图像按钮，就会打开一个窗口，让他们能够浏览到想要上传到页面的文件的位置。他们找到文件并选择它。然后，该图片显示在div标记内。这是否可以使用Javascript实现

非常感谢您事先提供的任何帮助

<html>
<head>
<title>Upload Image Help!</title>

<style>
#addImage{position: absolute; top: 5px; left: 50px; width: 300px; height: 200px; border: 1px solid black;}
#button{position: absolute; top: 215px; left: 135px; width: 120px; height: 30px;}
</style>
</head>

<body>
<div id="addImage"></div>
<button id="button" type="button">Upload Image</button>
</body>
</html>


上传图片帮助！
#addImage{位置：绝对；顶部：5px；左侧：50px；宽度：300px；高度：200px；边框：1px纯黑色；}
#按钮{位置：绝对；顶部：215px；左侧：135px；宽度：120px；高度：30px；}
上传图像

这是一个很难回答的问题，但“正确”的答案是“不，这不能仅仅用html、css和js在本地完成”。原因是由于安全原因，您无法通过html标记指向本地文件。唯一的选择是让JS通过AJAX调用将文件上传到服务器，然后在div中显示临时上传的文件。

我知道这是一篇老文章，但这是一种方法

从这里开始。。。

在这里结束。。。

仅使用html css js

HTML

Javascript

  const fileSelect = document.getElementById("fileSelect"),
 fileElem = document.getElementById("fileElem"),
 fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function(e) {
 if (fileElem) {
   fileElem.click();
 }
 e.preventDefault(); 
}, false);

fileElem.addEventListener("change", handleFiles, false);

function handleFiles() {
 if (!this.files.length) {} else {
   const list = document.createElement("ul");
   fileList.appendChild(list);
   for (let i = 0; i < this.files.length; i++) {
     const li = document.createElement("li");
     list.appendChild(li);
     const imgContainer = document.getElementById("image-container")
     const imgContainer2 = document.getElementById("image-container2")
     const img = document.createElement("img");
     img.src = URL.createObjectURL(this.files[i]);

     // for CSS Background-image
     imgContainer.style.backgroundImage = `url("${img.src}")`;
     
     // for HTML src
     imgContainer2.innerHTML = `<img width='400px' height='auto' 
     src='${img.src}'/>`;

     // hide input after file selected
     fileElem.addEventListener("click", hide());

     function hide() {
       document.getElementById('input-container').style.display = 'none';
     }

   }
 }
}

const fileSelect=document.getElementById（“fileSelect”），
fileElem=document.getElementById（“fileElem”），
fileList=document.getElementById（“fileList”）；
fileSelect.addEventListener（“单击”，函数（e）{
if（fileElem）{
fileElem.click（）；
}
e、 预防默认值（）；
}，假）；
fileElem.addEventListener（“更改”，HandleFile，false）；
函数handleFiles（）{
如果（！this.files.length）{}else{
const list=document.createElement（“ul”）；
fileList.appendChild（列表）；
for（设i=0；i


这需要一些加强和一个本地存储模块，但它在safari brave firefox和chrome上工作，截至本文是的。这是可能的。术语混淆：你不上传到页面，而是上传到服务器。那么，您想让人们将文件上传到服务器，然后在页面上用作图像链接，还是希望人们只将本地数据加载到正在运行的页面中，然后您可以在页面上使用该页面，但如果他们刷新，该页面将消失？您好，迈克，谢谢您的回复。我只想把图片上传到浏览器是的。这样最终用户就可以看到它在不同的相框中的外观。我的意图是，一旦图像出现在页面上，我将使用JS在单击时更改帧。因此，无需将图像保存到服务器。您好streetlogics，谢谢您的建议。我想，在这种情况下，我将研究如何学习AJAX。这里有一个很好的教程，您可以遵循它，这将有助于在概念上简化一些事情-
    #image-container {
  height: 400px;
  width: 400px;
  background-size: 150%;
}


  const fileSelect = document.getElementById("fileSelect"),
 fileElem = document.getElementById("fileElem"),
 fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function(e) {
 if (fileElem) {
   fileElem.click();
 }
 e.preventDefault(); 
}, false);

fileElem.addEventListener("change", handleFiles, false);

function handleFiles() {
 if (!this.files.length) {} else {
   const list = document.createElement("ul");
   fileList.appendChild(list);
   for (let i = 0; i < this.files.length; i++) {
     const li = document.createElement("li");
     list.appendChild(li);
     const imgContainer = document.getElementById("image-container")
     const imgContainer2 = document.getElementById("image-container2")
     const img = document.createElement("img");
     img.src = URL.createObjectURL(this.files[i]);

     // for CSS Background-image
     imgContainer.style.backgroundImage = `url("${img.src}")`;
     
     // for HTML src
     imgContainer2.innerHTML = `<img width='400px' height='auto' 
     src='${img.src}'/>`;

     // hide input after file selected
     fileElem.addEventListener("click", hide());

     function hide() {
       document.getElementById('input-container').style.display = 'none';
     }

   }
 }
}