CF7文件上传图片 [英] CF7 file upload image

问题描述

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

I'm using CF7 to capture user input and for them to upload an image file. I want to display the image file on the screen once its uploaded and before the submit button is pressed.

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

I can see on the screen the file name, and if I jQuery the input value it says c:\fakepath\[filename].

我的 jQuery 是:

My jQuery is:

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

产生 c:\fakepath\[filename]

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

Is it possible to find the local path, as the image is not saved to the WPDB until the user hits submit.

推荐答案

访问文件名受到限制，这是一项安全功能.您将无法获得完整路径.请参阅如何解析 C:\fakepath? 或 从<file>获取价值给出 C:\fakepath\filename，即使在 Linux 中

Accessing the filename is restricted, this is a security feature. You won't be able to get the full path. See How to resolve the C:\fakepath? or Getting value from <file> gives C:\fakepath\filename, even in Linux

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

You can however read the selected file and display a thumbnail of the selected image without accessing the filename:

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

来源

这是使用 FileReader API

这篇关于CF7文件上传图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！