js实现预览base64文件

可以通过创建一个blob对象，然后使用URL.createObjectURL()方法将其转换为URL，最后将URL分配给img标签的src属性来实现预览base64文件。以下是一个简单的示例代码：

HTML：

<input type="file" accept="image/*" onchange="previewFile(this)">
<img id="preview">

JavaScript：

function previewFile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      var blob = new Blob([e.target.result], { type: "image/png" }); // 创建blob对象
      var url = URL.createObjectURL(blob); // 将blob对象转换为URL
      document.getElementById("preview").src = url; // 将URL分配给img标签的src属性
    };
    
    reader.readAsArrayBuffer(input.files[0]);
  }
}

相关问题

js预览base64文件

可以使用URL.createObjectURL()方法将base64编码的文件转换为URL，然后使用该URL在浏览器中预览文件。

以下是一个简单的示例：

// 假设base64编码的文件已经存在于变量base64Data中
var byteCharacters = atob(base64Data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], {type: 'application/pdf'}); // 根据文件类型设置type
var url = URL.createObjectURL(blob);

// 使用创建的URL在浏览器中打开文件
window.open(url);

在这个例子中，我们使用了Blob对象来创建二进制文件，并使用URL.createObjectURL()方法来创建URL。然后我们使用window.open()方法在浏览器中打开文件。

请注意，此方法仅适用于支持Blob和URL.createObjectURL()方法的现代浏览器。

js利用a标签预览base64文件

可以使用以下方法来利用a标签预览base64文件：

1. 首先，将base64编码的文件内容存储在一个变量中。

var base64Content = "data:image/png;base64,iVBORw0KG...";

2. 创建一个a标签，并将其href属性设置为base64编码的内容。

var a = document.createElement("a");
a.href = base64Content;

3. 设置a标签的download属性为文件名，以便下载时使用。

a.download = "file.png";

4. 创建一个新的鼠标点击事件，并将其分派到a标签上。

var event = new MouseEvent("click");
a.dispatchEvent(event);

完整代码如下：

var base64Content = "data:image/png;base64,iVBORw0KG...";
var a = document.createElement("a");
a.href = base64Content;
a.download = "file.png";
var event = new MouseEvent("click");
a.dispatchEvent(event);