0

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

http://jsfiddle.net/Margate/w8C5r/

这个想法是，用户单击上传图像按钮，将打开一个窗口，使他们能够浏览到他们想要上传到页面的文件的位置。他们找到文件并选择它。然后图片显示在 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>
4

2 回答 2

1

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

于 2013-06-17T16:54:01.283 回答
0

我知道这是一篇旧帖子，但这是一种方法。

从这里开始...... https://www.w3schools.com/jsref/prop_fileupload_files.asp

到此结束... https://jsfiddle.net/trentHarlem/q6zutLjv/11/

仅使用 html css js

HTML

```<div id='input-container'>
  <input type="file" id="fileElem" multiple accept="image/*">
  <a href="#" id="fileSelect"></a>
  <div id="fileList"></div>
</div>

<div id="image-container"></div>
<div id="image-container2"></div>```

CSS

    #image-container {
  height: 400px;
  width: 400px;
  background-size: 150%;
}

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';
     }

   }
 }
}

这需要一些收紧和本地存储模块，但它适用于 safari 勇敢的 firefox 和 chrome 在这篇文章中

于 2021-02-10T15:20:14.443 回答