Question

您好我想知道是否可以在html中创建一个按钮，其功能类似于＆＃34;浏览＆＃34;单击按钮时，它将显示计算机目录，如本地驱动器，文档等。

我想要做的就是使用这个＆＃34;浏览＆＃34;按钮设置具有图像（.png / .jpeg）的文件夹路径，然后选择目录文件夹后，图像文件名应以列表形式显示。

*注意：机器连接在LAN网络上，所有内容都是共享的没有任何限制。

示例

路径： C：\ Documents \ TargetFolder（这是将使用＆＃34浏览的内容;浏览＆＃34;按钮路径位置可能会改变，可能来自同一台机器内的不同位置或同一网络上的不同计算机，这就是为什么＆＃34;浏览＆＃34;需要按钮）

输出： 从Source（TargetFolder）可以说，对于20个图像文件，列表应该显示图像文件名，路径属性（创建日期和时间）以及拉出的实际图像。根据列表中选择的内容进行切换

这可能吗？

browse button window

webpage looks like this

Answer 1

实际上，您希望在Web浏览器中使用文件管理器（文件库更精确）。

没有这样的东西可以帮助你在没有编写数百行代码的情况下实现这一点。

Answer 2

此链接可能会对您有所帮助https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

并遵循以下代码

＆＃13;

var input = document.querySelector('input');
var preview = document.querySelector('.preview');

input.style.opacity = 0;input.addEventListener('change', updateImageDisplay);function updateImageDisplay() {
  while(preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  var curFiles = input.files;
  if(curFiles.length === 0) {
    var para = document.createElement('p');
    para.textContent = 'No files currently selected for upload';
    preview.appendChild(para);
  } else {
    var list = document.createElement('ol');
    preview.appendChild(list);
    for(var i = 0; i < curFiles.length; i++) {
      var listItem = document.createElement('li');
      var para = document.createElement('p');
      if(validFileType(curFiles[i])) {
        para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
        var image = document.createElement('img');
        image.src = window.URL.createObjectURL(curFiles[i]);

        listItem.appendChild(image);
        listItem.appendChild(para);

      } else {
        para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}var fileTypes = [
  'image/jpeg',
  'image/pjpeg',
  'image/png'
]

function validFileType(file) {
  for(var i = 0; i < fileTypes.length; i++) {
    if(file.type === fileTypes[i]) {
      return true;
    }
  }

  return false;
}function returnFileSize(number) {
  if(number < 1024) {
    return number + 'bytes';
  } else if(number >= 1024 && number < 1048576) {
    return (number/1024).toFixed(1) + 'KB';
  } else if(number >= 1048576) {
    return (number/1048576).toFixed(1) + 'MB';
  }
}

＆＃13;

html {
  font-family: sans-serif;
}

form {
  width: 600px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li, div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label, form button {
  background-color: #7F9CCB;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover, form button:hover {
  background-color: #2D5BA3;
  color: white;
}

form label:active, form button:active {
  background-color: #0D3F8F;
  color: white;
}

＆＃13;

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
    <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
  </div>
  <div class="preview">
    <p>No files currently selected for upload</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

＆＃13;

Answer 3

不完全符合您的要求，但是（如果它适用于您的用例），用户可以使用浏览按钮从同一目录中选择多个文件。

MDN 上有一个可爱的例子

<块引用>

https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications#example_showing_thumbnails_of_user-selected_images

<input type="file" id="input" multiple>

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

function handleFiles(files) {
  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    if (!file.type.startsWith('image/')){ continue }

    const img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.

    const reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

浏览按钮，将在html中显示本地目录文件夹中的图像文件

3 个答案: