CF7文件上传图片

【问题标题】：CF7 file upload imageCF7文件上传图片
【发布时间】：2018-07-29 04:10:08
【问题描述】：

我正在使用 CF7 来捕获用户输入并让他们上传图像文件。我想在上传后和按下提交按钮之前在屏幕上显示图像文件。

我可以在屏幕上看到文件名，如果我使用 jQuery 输入值，它会显示 c:\fakepath\[filename]。

我的 jQuery 是：

var x = jQuery('span.imageid1 input').val();

产生c:\fakepath\[filename]

是否可以找到本地路径，因为图像在用户点击提交之前不会保存到 WPDB。

【问题讨论】：

标签： jquery image upload contact-form-7

【解决方案1】：

访问文件名受到限制，这是一项安全功能。您将无法获得完整路径。见How to resolve the C:\fakepath?或Getting value from <file> gives C:\fakepath\filename, even in Linux

但是，您可以在不访问文件名的情况下读取所选文件并显示所选图像的缩略图：

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

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

    var 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.

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

Source

这是使用FileReader API

【讨论】：