Question

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

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

我的jQuery是：

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

产生c:\fakepath\[filename]

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

Answer 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

CF7文件上传图片

1 个答案: