获取完整路径图像到输入文件中 [英] Get full path image into input file

问题描述

我想从输入文件中获取完整路径图像以进行显示图像预览，并使用例如 attr 的 jquery 将其插入到 scr 到此时间图像路径中，例如我认为>

var filePath = $(this).val();控制台日志(文件路径)；jQuery('#preview').attr("src",""+img_p);

问题我不知道如何从输入文件中获取此时间路径以进行显示并插入此路径以用于预览图像，直到发送到系统中上传

谢谢，问候

解决方案

MOZILLA DEVELOPER NETWORK 向我们展示了一个示例:

<a href="#" id="fileSelect">选择一些文件</a><div id="文件列表"><p>未选择任何文件！</p>

<脚本>window.URL = window.URL ||window.webkitURL;var fileSelect = document.getElementById("fileSelect"),fileElem = document.getElementById("fileElem"),fileList = document.getElementById("fileList");fileSelect.addEventListener("click", function (e) {如果(文件元素){fileElem.click();}e.preventDefault();//阻止导航到#"}， 错误的);函数句柄文件(文件){如果(！文件.长度){fileList.innerHTML = "

没有选择文件！

";} 别的 {var list = document.createElement("ul");for (var i = 0; i

此处 Mozilla DOC.

这里 这样做有一些问题.

I want get the full path image from input file for show image preview and use for example attr of jquery for insert this into scr to this temporal image path , for example i think in that

var filePath = $(this).val();
console.log(filePath);

jQuery('#preview').attr("src",""+img_p);

The problem i don´t know how i can get this temporal path from input file for show and insert this path for the preview image until send to upload in the system

Thank´s , Regards

解决方案

MOZILLA DEVELOPER NETWORK show us an example to do that:

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a> 
<div id="fileList">
  <p>No files selected!</p>
</div>

<script>
window.URL = window.URL || window.webkitURL;

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

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    var list = document.createElement("ul");
    for (var i = 0; i < files.length; i++) {
      var li = document.createElement("li");
      list.appendChild(li);

      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function(e) {
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);

      var info = document.createElement("span");
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
      li.appendChild(info);
    }
    fileList.appendChild(list);
  }
}
</script>

HERE the Mozilla DOC.

HERE some problem to do that.

这篇关于获取完整路径图像到输入文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！