我要投稿

javascript 文件操作-JS后端使用Blob和File读取file_javascript方法的操作代码

bendan520 javascript

2023-08-29 0 5,281 百度已收录

进不了网站？换个网络试试！

function upload(blobOrFile) {
  let xhr = new XMLHttpRequest();
  xhr.open('post', '/server', true);
  xhr.onload = function(e) {};
  xhr.send(blobOrFile);
}
document.querySelctor('input[type="file"]').addEventListener('change', function() {
  let blob = this.files[0];
  const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk size
  const SIZE = blob.size;
  let start = 0;
  let end = BYTES_PER_CHUNK;
  while(start < end) {
    upload(blob.slice(start, end));
    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);

文件

文件套接字提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

File对象可以用来获取文件的信息javascript 文件操作，也可以用来读取文件的内容。一般来说，File对象是用户在元素上选择文件后返回的FileList对象，也可以是拖动操作生成的DataTransfer对象。

用户选择一个或多个文件后，可以通过FileAPI访问这些File对象，这些File对象包含在FileList对象中。所有类型为file的输入都有一个files属性，可以通过Element.files返回FileList对象。

    
    
        var fileInput = document.querySelector("#fileInput");
        fileInput.addEventListener("change", function (event) {
          // 文件列表对象
          var fileList = this.files;
          // 获取第一个文件
          var file = fileInput.files[0];
          // 文件名
          var filename = file.name;
          // 文件大小
          var filesize = file.size;
          //文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读
          var type = file.type; 
          // 文件的上次修改时间，格式为时间戳
          var lastModified = file.lastModified;
          // 文件的上次修改时间，格式为 Date 对象实例
          var lastModifiedDate = file.lastModifiedDate;
        }, false);
        console.log(fileList);
        // 上传了两个文件，FileList {0: File, 1: File, length: 2}

文件对象的属性：

File对象的方式：

File套接字没有定义任何方法，它从Blob套接字继承了以下方法：

斑点。切片([开始[,结束[,内容类型]]])

返回一个新的 Blob 对象，其中包含源 Blob 对象指定范围内的数据。

文件阅读器

我们知道Blob对象只是一个补码数据的容器，它本身并不能操作补码代码。 FileReader对象专门用于操作二进制补码数据。 FileReader主要用于将文件内容读取到显存中。通过一系列异步套接字，您可以在主线程中访问本地文件。

构造函数

var reader = new FileReader();

属性风暴法的实际应用

上传后直接预览图片，无需先经过后台。

var input  = document.getElementById("file"); //input file
input.onchange = function(){
    var file = this.files[0];
    if(!!file){
        var reader = new FileReader();
        // 将图片转成DataURL格式
        reader.readAsDataURL(file);
        reader.onload = function(){
            //读取完毕后输出结果
           document.getElementById("file_img").src = reader.result //显示上传的图片
           console.log(reader.result);
        }
    }
}

URLURL.createObjectURL(blob)

//blob参数是一个File对象或者Blob对象.
var objecturl =  window.URL.createObjectURL(blob);

里面的代码会生成一个二进制补码数据的URL，这个URL可以放在任何可以正常放置URL的地方，比如img标签的src属性。需要注意的是，虽然是相同的补码数据，但每次调用URL.createObjectURL方法时，都会得到不同的URL。

该URL的存在时间等于该网页的存在时间。一旦网页刷新或卸载，该URL就会失效。（File 和 Blob 则不然。）此外，可以自动调用 URL.revokeObjectURL 方法来使 URL 失效。

URL.revokeObjectURL(objectURL);

当不再需要此类 URL 对象时javascript 文件操作，必须通过调用 URL.revokeObjectURL() 来释放每个对象。当文档退出时，浏览器将手动释放它们，为了获得最佳性能和内存使用率，您应该在安全的情况下主动释放它们。

实际应用



    
    文件上传
    
    
        #file{
            display: block;
            width: 400px;
            height: 300px;
            opacity:0;
            margin: -300px 0 0 0;            
        }
        #preview{
            display: block;
            width: 400px;
            height: 300px;
        }
    


    
    



  $('#file').on('change', function(){
    //获取文件列表对象
    var fileList = $('#file')[0].files;
    //创建文件流获取文件地址
    var src = window.URL.createObjectURL(fileList[0]); 　　　　
    //设置图片路径  
    $("#preview").attr("src", src);
    $("#preview").load(function() {
      window.URL.revokeObjectURL(src);
    });
　});

参考

Blob-WebAPI 套接字参考|MDN

Blob、FileReader综合分析

收藏 (0) 打赏

感谢您的支持，我会继续努力的!