精华内容
下载资源
问答
  • JavaScript 文件对象File

    千次阅读 2021-01-21 15:51:45
    在浏览器中操作文件,多数情况下用到的是 File 对象,从<...Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。 Blob构造函数 Blob(array[, options]) ar

    在浏览器中操作文件,多数情况下用到的是 File 对象,从<input type='file' />元素获取,进而继续操作(例如将选择的图片展示在页面上,用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API.

    File 对象继承自 Blob 对象,先看看 Blob 对象。

    1. Blob 对象

    Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。

    Blob构造函数 Blob(array[, options])

    • array 是一个由ArrayBuffer, ArrayBufferView, Blob, string 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。string会被编码为UTF-8。
    • options 是一个可选的对象,它可能会指定如下两个属性:
      • type,默认值为 “”,它代表了将会被放入到blob中的数组内容的MIME类型。
      • endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: “native”,代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者
        “transparent”,代表会保持blob中保存的结束符不变。

    示例:

    methods: {
        files() {
          var content1 = ["This is my firt trip to an island"];
          var blob1 = new Blob(content1, { type: "text/plain" });
          var content2 = { name: "Alice", age: 23 };
          var blob2 = new Blob([JSON.stringify(content2, null, 2)], {
            type: "application/json"
          });
          console.log(blob1, 1); // Blob {size: 33, type: "text/plain"}size: 33type: "text/plain"__proto__: Blob 1
          console.log(blob2, 2); // Blob {size: 34, type: "application/json"} 2
        }
      }
    

    属性名称

    Blob实例属性

    属性名称读/写描述
    size只读Blob 对象中所包含数据的大小(字节)。
    type只读一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。例如 “image/png”.

    2. File 对象

    File构造函数

    我们接触的多数关于 File 的操作都是读取,js也为我们提供了手动创建 File 对象的构造函数:File(bits, name[, options])。

    • bits (required) ArrayBuffer,ArrayBufferView,Blob,或者 Array[string] —
      或者任何这些对象的组合。这是 UTF-8 编码的文件内容。。
    • name [String] (required) 文件名称,或者文件路径.
    • options [Object] (optional) 选项对象,包含文件的可选属性。可用的选项如下:
      • type: string, 表示将要放到文件中的内容的MIME类型。默认值为 ‘’ 。
      • lastModified: 数值,表示文件最后修改时间的 Unix 时间戳(毫秒)。默认值为 Date.now()。

    示例:

    var file1 = new File(['text1', 'text2'], 'test.txt', {type: 'text/plain'});
    

    根据已有的 blob 对象创建 File 对象:

    var file2 = new File([blob], 'test.png', {type: 'image/png'});
    

    File实例属性

    File 对象的实例内容不可见,但是有以下属性可以访问:

    属性名称读/写描述
    name只读返回文件的名称.由于安全原因,返回的值并不包含文件路径 。
    type只读返回 File 对象所表示文件的媒体类型(MIME)。例如 PNG 图像是 “image/png”.
    lastModified只读number, 返回所引用文件最后修改日期,自 1970年1月1日0:00 以来的毫秒数。
    lastModifiedDate只读Date, 返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代。
    size只读File 对象中所包含数据的大小(字节)。

    在这里插入图片描述
    示例:

    template

    <input type="file" ref="file" value="file" @change="chang" />
    

    methods

    chang () {
       	  console.log(this.$refs.file.files[0]);
       }
    /**
    	File {name: "MinerInfo.vue - android - Visual Studio Code 2020_11_24 10_49_12.png", lastModified: 1606186152444, lastModifiedDate: Tue Nov 24 2020 10:49:12 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 137573, …}
    	lastModified: 1606186152444
    	lastModifiedDate: Tue Nov 24 2020 10:49:12 GMT+0800 (中国标准时间) {}
    	name: "MinerInfo.vue - android - Visual Studio Code 2020_11_24 10_49_12.png"
    	size: 137573
    	type: "image/png"
    	webkitRelativePath: ""
    	__proto__: File
    */
    

    更多…

    展开全文
  • JavaScript 文件对象详解

    万次阅读 2018-07-11 11:42:13
    在浏览器中操作文件,多数情况下用到的是 File 对象,从 <input type='file' /> 元素获取,进而继续操作(例如将选择的图片展示在页面上,用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API. ...

    在浏览器中操作文件,多数情况下用到的是 File 对象,从 <input type='file' /> 元素获取,进而继续操作(例如将选择的图片展示在页面上,用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API.

    File 对象继承自 Blob 对象,先看看 Blob 对象。

    1. Blob 对象

    Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。

    Blob构造函数 Blob(array[, options])

    • array 是一个由ArrayBuffer, ArrayBufferView, Blob, string 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。string会被编码为UTF-8。
    • options 是一个可选的对象,它可能会指定如下两个属性:
      • type,默认值为 "",它代表了将会被放入到blob中的数组内容的MIME类型
      • endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: "native",代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 "transparent",代表会保持blob中保存的结束符不变。

    示例:

    var content1 = ['This is my firt trip to an island'];
    var blob1 = new Blob(content, {type: 'text/plain'});
    var content2 = {name: 'Alice', age: 23};
    var blob2 = new Blob([JSON.stringify(content2, null, 2)], {type: 'application/json'});
    复制代码

    Blob实例属性

    属性名称读/写描述
    size只读 Blob 对象中所包含数据的大小(字节)。
    type只读一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。例如 "image/png".

    示例:

    var content = ['<div id="box"><p class="pra">a paragraph</p></div>'];
    var blob = new Blob(content, {type: 'text/html'});
    console.log(blob.size); // 50
    console.log(blob.type); // text/html
    复制代码

    Blob实例方法

    • slice([start[, end[, contentType]]])

    slice 方法接收三个可选参数,startend 都是数值,表示截取的范围,contentType 指定截取的内容的 MIME 类型。返回一个新的 Blob对象。

    var blob = new Blob(['This is an example of Blob slice method'], {type: 'text/plain'});
    console.log(blob.size); // 39
    var newBlob = blob.slice(10, 20, 'text/plain');
    console.log(newBlob.size); // 10
    复制代码

    Blob 对象中读取内容可以使用 FileReader. 下文会介绍。

    2. File 对象

    File构造函数

    我们接触的多数关于 File 的操作都是读取,js也为我们提供了手动创建 File 对象的构造函数:File(bits, name[, options])

    • bits (required) ArrayBuffer,ArrayBufferView,Blob,或者 Array[string] — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。。

    • name [String] (required) 文件名称,或者文件路径.

    • options [Object] (optional) 选项对象,包含文件的可选属性。可用的选项如下:

      • type: string, 表示将要放到文件中的内容的MIME类型。默认值为 '' 。
      • lastModified: 数值,表示文件最后修改时间的 Unix 时间戳(毫秒)。默认值为 Date.now()。

    示例:

    var file1 = new File(['text1', 'text2'], 'test.txt', {type: 'text/plain'});
    

    根据已有的 blob 对象创建 File 对象:

    var file2 = new File([blob], 'test.png', {type: 'image/png'});
    

    File实例属性

    File 对象的实例内容不可见,但是有以下属性可以访问:

    属性名称读/写描述
    name只读返回文件的名称.由于安全原因,返回的值并不包含文件路径 。
    type只读返回 File 对象所表示文件的媒体类型(MIME)。例如 PNG 图像是 "image/png".
    lastModified只读number, 返回所引用文件最后修改日期,自 1970年1月1日0:00 以来的毫秒数。
    lastModifiedDate只读Date, 返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代。

    示例:

    <input type="file" id='file'>
    
    document.getElementById('file').addEventListener('change', function(event){
      const file = this.files[0];
      if (file) {
        console.log(file.name);
        console.log(file.size);
        console.log(file.lastModified);
        console.log(file.lastModifiedDate);
      }
    });
    

    备注: 基于当前的实现,浏览器不会实际读取文件的字节流,来判断它的媒体类型。它基于文件扩展来假设;将PNG 图像文件的后缀名重命名为 .txt,那么读取的该文件的 type 属性值为 "text/plain", 而不是 "image/png" 。而且,file.type 仅仅对常见文件类型可靠。例如图像、文档、音频和视频。不常见的文件扩展名会返回空字符串。开发者最好不要依靠这个属性,作为唯一的验证方案。

    File实例方法

    • slice([start[, end[, contentType]]])

    File 对象没有定义额外的方法,由于继承了 Blob 对象,也就继承了 slice方法,用法同上文 Blobslice 方法。

    FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

    3. FileReader 对象

    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象指定要读取的文件或数据。

    其中 File 对象可以是来自用户在一个 <input> 元素上选择文件后返回的 FileList, 也可以来自拖放操作生成的 DataTransfer 对象,还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。

    FileReader构造函数

    var reader = new FileReader()

    构造函数不需要传入参数,返回一个 FileReader 的实例。FileReader 继承 EventTarget对象。

    FileReader实例属性

    属性名称读/写描述
    error只读 DOMException 的实例,表示在读取文件时发生的错误 。
    result只读文件的内容,该属性仅在读取操作完成后(load)后才有效,格式取决于读取方法
    readyState只读表示读取文件时状态的数字

    备注: readeyState的取值如下:

    常量名描述
    0EMPTY还没有加载任何数据
    1LOADING数据正在被加载
    2DONE已完成全部的读取请求.

    使用示例:

    var reader = new FileReader();
    console.log(reader.error);       // null
    console.log(reader.result);      // null
    console.log(reader.readyState);  // 0
    console.log(reader.EMPTY);       // 0
    console.log(reader.LOADING);     // 1
    console.log(reader.DONE);        // 2
    

    EMPTYLOADINGDONE 这三个属性同时存在于 FileReader 和它的的原型对象上,因此实例上有这三个属性,FileReader 对象本身也有这三个属性:

    console.log(FileReader.EMPTY);   // 0
    console.log(FileReader.LOADING); // 1
    console.log(FileReader.DONE);    // 2
    

    FileReader事件

    文件的读取是一个异步的过程,和 XMLHttpRequest 对象一样,在读取操作过程中会触发一系列事件。

    事件名称描述使用示例
    abort读取操作被中断时触发。reader.onabort = function(event) {}
    error在读取操作发生错误时触发。reader.onerror = function(event) {}
    load读取操作完成时触发。reader.addEventListener('load', function(event) {})
    loadstart读取操作开始时触发。reader.onloadstart = function(event) {}
    loadend读取操作结束时(要么成功,要么失败)触发。reader.onloadend = function(event) {}
    progress在读取Blob时触发。reader.onprogress = function(event) {}

    FileReader实例方法

    FileReader 的实例具有以下可操作的方法:

    方法名称描述使用示例
    abort()手动终止读取操作,只有当 readyState 为 1 时才能调用,调用后,readyState 值为 2reader.abort()
    readAsArrayBuffer(blob)读取指定的 BlobFile 对象。读取操作完成后(触发loadend事件),result属性将包含一个 ArrayBuffer 对象表示所读取的文件的数据。reader.readAsArrayBuffer(blob)
    readAsDataURL(blob)读取指定的 BlobFile 对象。读取操作完成后(触发loadend事件),result属性将包含一个 data:URL 格式的字符串(base64编码)reader.readAsArrayBuffer(file)
    readAsBinaryString(blob)已废弃,用 readAsArrayBuffer 代替--
    readAsText(blob[, encoding])将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式), 默认编码是 utf-8 reader.readAsArrayBuffer(blob)

    读取本地图片示例:

    <input type="file" id='file' accept="image/png, image/jpg, image/jpeg, image/gif" />><br />>
    <img src="" alt="Image preview...">
    
    var preview = document.querySelector('img');
    var reader  = new FileReader();
    reader.addEventListener("load", function () {
      preview.src = reader.result;
    }, false);
    document.getElementById('file').addEventListener('change', function (event) {
      var file = this.files[0];
      if (file) {
        reader.readAsDataURL(file);
      }
    });
    

    读取多个文件示例 - CodePen

    dataURL是base64编码的数据格式,展示类型为字符串,形如: data:image/jpeg;base64,/9j/4QXERXhpZgAATU...

    dataURL 转为 blob对象:

    function dataURLToBlob (dataurl) {
      let arr = dataurl.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    }
    

    结合上例,根据已有的 <img> 对象创建一个 File 对象:

    reader.addEventListener("load", function () {
      preview.src = reader.result;
      var blob = dataURLToBlob(reader.result);
      var newFile = new File([blob], 'test.jpeg', {type: blob.type});
      console.log(newFile.name); // test.jpeg
      console.log(newFile.type);
      console.log(newFile.size);
    }, false);
    

    URL.createObjectURL

    将图片文件转换成 data:URL 格式供 <img> 元素展示,除了使用 fileReader.readAsDataURL外,还可以使用 URL.createObjectURL方法。 URL.createObjectURL(blob) 方法返回一个 blob: 开头的字符串,指向文件在内存中的地址。

    <input type="file" id='file' accept="image/png, image/jpg, image/jpeg, image/gif" /><br />
    <img src="" alt="Image preview...">
    
    var preview = document.querySelector('img');
    document.getElementById('file').addEventListener('change', function (event) {
      var file = this.files[0];
      if (file) {
        preview.src = URL.createObjectURL(file);
      }
    });
    

    综合实例

    综合以上,可以实现一个简单的粘贴图片并显示的功能。HTML5提供的内容编辑功能,可以粘贴部分图片,例如从网页上复制的图片。但是使用截图工具截取的图片无法粘贴显示,而且从网页上复制的图片会带有原来的样式,其图片url也是原来图片的指向。我们使用以下代码可以统一这两种粘贴操作,实现统一的效果。

    <div id="comment" contenteditable></div>
    
    #comment{
      border: 1px solid #ccc;
      min-height: 500px;
      padding: 10px;
    }
    #comment:focus {
      border-color: #ccc;
      outline: none;
    }
    .img-paste {
      max-width: 100%;
    }
    
    var comment = document.getElementById('comment');
    comment.addEventListener('paste', function(event) {
      console.log(event);
      var item = event.clipboardData.files[0];
      if (item && /image/.test(item.type)) {
        var img = new Image();
        img.src = URL.createObjectURL(item);
        img.className = 'img-paste';
        this.appendChild(img);
        event.preventDefault();
      }
    }, false);
    

    实例效果可以查看这里

    参考链接



    原文发布时间为:2018年06月29日

    原文作者:Mr-dang

    本文来源: 掘金  如需转载请联系原作者
    展开全文
  • javascript-Blob文件对象

    2019-09-30 12:55:32
    一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件. 创建Blob对象的方法有几种,...

    一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.

    创建Blob对象的方法有几种,可以调用Blob构造函数,还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象,还可以调用canvas对象上的toBlob方法.

    例子:

    1
    
    var blob = new Blob(["Hello world!"], { type: "text/plain" });

    通过 Blob 对象可以创建一个子 Blob 对象,将其分割(file 对象也可以)。

    由于每个 Blob 对象都是通过指针指向数据的而不是指向数据本身,可以快速的创建指向其他子部分的新的 Blob 对象,这里使用 slice() 方法。

    此方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。

    当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的

     

    目前IE系列的浏览器 从IE10起支持Blob Chrome和Firefox支持Blob。

    转载于:https://www.cnblogs.com/erictanghu/p/3883601.html

    展开全文
  • Javascript 文件操作 Javascript File 对象

    千次阅读 2019-08-07 20:22:52
    Javascript 文件操作 Javascript File 对象 一、功能实现核心:FileSystemObject 对象 要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象。 二、FileSystemObject编程 使用...

    Javascript 文件操作 Javascript File 对象

    一、功能实现核心:FileSystemObject 对象
         要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象。
    二、FileSystemObject编程
    使用FileSystemObject 对象进行编程很简单,一般要经过如下的步骤: 创建FileSystemObject对象、应用相关方法、访问对象相关属性 。
    (一)创建FileSystemObject对象
    创建FileSystemObject对象的代码只要1行:
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    上述代码执行后,fso就成为一个FileSystemObject对象实例。
    (二)应用相关方法
    创建对象实例后,就可以使用对象的相关方法了。比如,使用CreateTextFile方法创建一个文本文件:
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var f1 = fso.createtextfile("c:\\myjstest.txt",true");
    (三)访问对象相关属性
    要访问对象的相关属性,首先要建立指向对象的句柄,这就要通过get系列方法实现:GetDrive负责获取驱动器信息,GetFolder负责获取文件夹信息,GetFile负责获取文件信息。比如,指向下面的代码后,f1就成为指向文件c:\test.txt的句柄:
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var f1 = fso.GetFile("c:\\myjstest.txt");
    然后,使用f1访问对象的相关属性。比如:
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var f1 = fso.GetFile("c:\\myjstest.txt");
    alert(" File last modified: " + f1.DateLastModified);
    执行上面最后一句后,将显示c:\myjstest.txt的最后修改日期属性值。
    但有一点请注意:对于使用create方法建立的对象,就不必再使用get方法获取对象句柄了,这时直接使用create方法建立的句柄名称就可以:
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var f1 = fso.createtextfile("c:\\myjstest.txt",true");
    alert(" File last modified: " + f1.DateLastModified);
    三、操作驱动器(Drives)
    使用FileSystemObject对象来编程操作驱动器(Drives)和文件夹(Folders)很容易,这就象在Windows文件浏览器中对文件进行交互操作一样,比如:拷贝、移动文件夹,获取文件夹的属性。
    (一)Drives对象属性
    Drive对象负责收集系统中的物理或逻辑驱动器资源内容,它具有如下属性:
    l TotalSize:以字节(byte)为单位计算的驱动器大小。
    l AvailableSpace或FreeSpace:以字节(byte)为单位计算的驱动器可用空间。
    l DriveLetter:驱动器字母。
    l DriveType:驱动器类型,取值为:removable(移动介质)、fixed(固定介质)、network(网络资源)、CD-ROM或者RAM盘。
    l SerialNumber:驱动器的系列码。
    l FileSystem:所在驱动器的文件系统类型,取值为FAT、FAT32和NTFS。
    l IsReady:驱动器是否可用。
    l ShareName:共享名称。
    l VolumeName:卷标名称。
    l Path和RootFolder:驱动器的路径或者根目录名称。
    (二)Drive对象操作例程
    下面的例程显示驱动器C的卷标、总容量和可用空间等信息:
    var fso, drv, s ="";
    fso = new ActiveXObject("Scripting.FileSystemObject");
    drv = fso.GetDrive(fso.GetDriveName("c:\\"));
    s += "Drive C:" + " - ";
    s += drv.VolumeName + "\n";
    s += "Total Space: " + drv.TotalSize / 1024;
    s += " Kb" + "\n";
    s += "Free Space: " + drv.FreeSpace / 1024;
    s += " Kb" + "\n";
    alert(s);
    四、操作文件夹(Folders)
    涉及到文件夹的操作包括创建、移动、删除以及获取相关属性。
    Folder对象操作例程 :
    下面的例程将练习获取父文件夹名称、创建文件夹、删除文件夹、判断是否为根目录等操作:
    var fso, fldr, s = "";
    // 创建FileSystemObject对象实例
    fso = new ActiveXObject("Scripting.FileSystemObject");
    // 获取Drive 对象
    fldr = fso.GetFolder("c:\\");
    // 显示父目录名称
    alert("Parent folder name is: " + fldr + "\n");
    // 显示所在drive名称
    alert("Contained on drive " + fldr.Drive + "\n");
    // 判断是否为根目录
    if (fldr.IsRootFolder)
    alert("This is the root folder.");
    else
    alert("This folder isn't a root folder.");
    alert("\n\n");
    // 创建新文件夹
    fso.CreateFolder ("C:\\Bogus");
    alert("Created folder C:\\Bogus" + "\n");
    // 显示文件夹基础名称,不包含路径名
    alert("Basename = " + fso.GetBaseName("c:\\bogus") + "\n");
    // 删除创建的文件夹
    fso.DeleteFolder ("C:\\Bogus");
    alert("Deleted folder C:\\Bogus" + "\n");
    五、操作文件(Files)
    对文件进行的操作要比以上介绍的驱动器(Drive)和文件夹(Folder)操作复杂些,基本上分为以下两个类别:对文件的创建、拷贝、移动、删除操作和对文件内容的创建、添加、删除和读取操作。下面分别详细介绍。
    (一)创建文件
    一共有3种方法可用于创建一个空文本文件,这种文件有时候也叫做文本流(text stream)。
    第一种是使用CreateTextFile方法。代码如下:
    var fso, f1;
    fso = new ActiveXObject("Scripting.FileSystemObject");
    f1 = fso.CreateTextFile("c:\\testfile.txt", true);
    第二种是使用OpenTextFile方法,并添加上ForWriting属性,ForWriting的值为2。代码如下:
    var fso, ts;
    var ForWriting= 2;
    fso = new ActiveXObject("Scripting.FileSystemObject");
    ts = fso.OpenTextFile("c:\\test.txt", ForWriting, true);
    第三种是使用OpenAsTextStream方法,同样要设置好ForWriting属性。代码如下:
    var fso, f1, ts;
    var ForWriting = 2;
    fso = new ActiveXObject("Scripting.FileSystemObject");
    fso.CreateTextFile ("c:\\test1.txt");
    f1 = fso.GetFile("c:\\test1.txt");
    ts = f1.OpenAsTextStream(ForWriting, true);
    (二)添加数据到文件
    当文件被创建后,一般要按照“打开文件->填写数据->关闭文件”的步骤实现添加数据到文件的目的。
    打开文件可使用FileSystemObject对象的OpenTextFile方法,或者使用 File对象的OpenAsTextStream方法。
    填写数据要使用到TextStream对象的Write、WriteLine或者WriteBlankLines方法。在同是实现写入数据的功能 下,这3 者的区别在于:Write方法不在写入数据末尾添加新换行符,WriteLine方法要在最后添加一个新换行符,而WriteBlankLines则增加 一个或者多个空行。
    关闭文件可使用TextStream对象的Close方法。
    (三)创建文件及添加数据例程
    下面的代码将创建文件、添加数据、关闭文件几个步骤结合起来进行应用:
    var fso, tf;
    fso = new ActiveXObject("Scripting.FileSystemObject");
    // 创建新文件
    tf = fso.CreateTextFile("c:\\testfile.txt", true);
    // 填写数据,并增加换行符
    tf.WriteLine("Testing 1, 2, 3.") ;
    // 增加3个空行
    tf.WriteBlankLines(3) ;
    // 填写一行,不带换行符
    tf.Write ("This is a test.");
    // 关闭文件
    tf.Close();
    (四)读取文件内容
    从文本文件中读取数据要使用TextStream对象的Read、ReadLine或ReadAll 方法。Read方法用于读取文件中指定数量的字符;ReadLine方法读取一整行,但不包括换行符;ReadAll方法则读取文本文件的整个内容。读取 的内容存放于字符串变量中,用于显示、分析。在使用Read或ReadLine方法读取文件内容时,如果要跳过一些部分,就要用到Skip或 SkipLine方法。
    下面的代码演示打开文件、填写数据,然后读取数据:
    var fso, f1, ts, s;
    var ForReading = 1;
    fso = new ActiveXObject("Scripting.FileSystemObject");
    // 创建文件
    f1 = fso.CreateTextFile("c:\\testfile.txt", true);
    // 填写一行数据
    f1.WriteLine("Hello World");
    f1.WriteBlankLines(1);
    // 关闭文件
    f1.Close();
    // 打开文件
    ts = fso.OpenTextFile("c:\\testfile.txt", ForReading);
    // 读取文件一行内容到字符串
    s = ts.ReadLine();
    // 显示字符串信息
    alert(" File contents = '" + s + "'");
    // 关闭文件
    ts.Close();
    (五)移动、拷贝和删除文件
    对于以上三种文件操作,javascript各有两种对应的方法: File.Move 或 FileSystemObject.MoveFile用于移动文件; File.Copy 或 FileSystemObject.CopyFile用于拷贝文件; File.Delete 或 FileSystemObject.DeleteFile用于删除文件。
    下面的代码演示在驱动器C的根目录下创建一个文本文件,填写一些内容,然后将文件移动到\tmp目录下,再在目录\temp下面建立一个文件拷贝,最后删除这两个目录的文件:
    var fso, f1, f2, s;
    fso = new ActiveXObject("Scripting.FileSystemObject");
    f1 = fso.CreateTextFile("c:\\testfile.txt", true);
    // 写一行
    f1.Write("This is a test.");
    // 关闭文件
    f1.Close();
    // 获取C:\根目录下的文件句柄
    f2 = fso.GetFile("c:\\testfile.txt");
    // 移动文件到\tmp目录下
    f2.Move ("c:\\tmp\\testfile.txt");
    // 拷贝文件到\temp目录下
    f2.Copy ("c:\\temp\\testfile.txt");
    // 获取文件句柄
    f2 = fso.GetFile("c:\\tmp\\testfile.txt");
    f3 = fso.GetFile("c:\\temp\\testfile.txt");
    // 删除文件
    f2.Delete();
    f3.Delete();
    六、结 语
    通过以上对FileSystemObject的各种对象、属性和方法的介绍和示例,相信你已经对如何使用javascript语言在页面中操作驱 动器、文件和文件夹有了清晰的认识。但是上述提及的例程都非常简单,要全面、灵活地掌握javascript文件操作技术,还需要大量的实践练习。而且还 有一点提醒大家,由于涉及到在浏览器中进行文件读写这样的高级操作,对于默认的浏览器安全级别而言,在代码运行前都会有一个信息提示,这点请在实际环境中 提示访问者注意。
    File 对象

    提供对文件所有属性的访问。
    说明

    下面的代码演示了如何获得 File对象以及如何查看它的一个属性。

    function ShowFileInfo(filespec){   var fso, f, s;    fso = new ActiveXObject("Scripting.FileSystemObject");    f = fso.GetFile(filespec);    s = f.DateCreated;    return(s);}

    方法

    Copy 方法|Delete 方法|Move 方法|OpenAsTextStream 方法
    属性

    Attributes 属性|DateCreated 属性|DateLastAccessed 属性|DateLastModified 属性|Drive 属性|Name 属性|ParentFolder 属性|Path 属性|ShortName 属性|ShortPath 属性|Size 属性|Type 属性
    请参阅

    转载于:https://www.cnblogs.com/mac_arthur/archive/2010/02/26/1674088.html

    展开全文
  • 通过字符串 创建文件对象 file object

    千次阅读 2018-11-05 10:03:07
    open()函数可以创建file object,那么可不可以通过字符串来创建具有write和read等方法的file object呢? io.StringIO 函数 import io f = io.StringIO(&quot;some initial text data&quot;) file object也...
  • JavaScript 读取CSV文件并转为js对象

    千次阅读 2019-06-05 10:11:00
    -- 创建隐藏file input --><button type="button" name="seach" onclick="FuncCSVInport()">CSV Import</button> <input type="file" id="csvFileInput" onchange="readCSVFile(this)...
  • 通过JavaScript创建Qml对象

    千次阅读 2014-01-21 13:46:46
    JavaScript动态创建和销毁Qml 对象
  • js 创建图片对象

    千次阅读 2017-09-05 18:12:04
    创建一个图片对象 : var img=new Image([w,h])图片对象img的属性:border|complete |height |width |hspace |lowsrc |name |src |vspace ;图片对象img的事件:onload |onerror |onabort具体参考:...
  • //创建一个文件对象 File f1 = new File("文件的地址"); //绝对路径 System.out.println("f1的绝对路径:" + f1.getAbsolutePath()); // 相对路径 File f2 = new File("LOL.exe"); ...
  • QT通过JavaScript动态创建QML对象通过JavaScript动态创建QML对象动态创建对象动态创建组件从QML字符串创建对象维护动态创建对象动态删除对象 通过JavaScript动态创建QML对象 QML支持从JavaScript内部动态创建对象...
  • JS读取文件,Javascript文件操作 (IE)

    万次阅读 2016-04-11 09:27:46
     要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对象。  二、FileSystemObject编程  使用FileSystemObject 对象进行编程很简单,一般要经过如下的步骤: 创建FileSystemObject对象、应用相关...
  • 1.new Object() 2.字面量创建对象 构造函数创建对象 工厂模式
  • 在Webpack构建过程中,从JavaScript对象创建json文件。 安装 npm i -D emit-json-file-webpack-plugin 用法 new EmitJsonFileWebpackPlugin([files]) 文件看起来像: { path: 'filePath', content: 'object' } ...
  • js用FileSystemObject 对象实现文件控制 一、功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象。在详细介绍FileSystemobject对象的各个...
  • jsjs创建对象的方法

    千次阅读 2016-12-30 15:44:50
    最近学习了一下js对象,其中创建一个空对象了解到三种方法,如下://方法一 var obj1 = {};//方法二 var obj2 = Object.create(null);//方法三 var obj3 = new Object();这两种方法都可以创建一个空对象,亲自在...
  • js获取file文件对象大小

    千次阅读 2012-07-25 21:25:52
     if(e.description=="Automation服务器不能创建对象"){  alert("文件大小验证未生效!\r\n启用此验证,请如下修改浏览器设置:工具->Internet选项->安全->本地Intranet->自定义级别->ActiveX控件和插件->对没有...
  • 本篇博客目的在于给大家分享一下JS中如何去创建对象,以及创建对象的方法,让大家以后可以使用JS快乐的创建对象,以及在合适的场景使用合适的方式创建对象JS中的对象概念: 在JS中,我们把对象定义为:“无序属性...
  • js用FileSystemObject 对象实现文件控制 一、功能实现核心:FileSystemObject 对象其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象。在详细介绍FileSystemobject对象的各个属性和方法的...
  • Javascript创建文件下载

    2017-02-11 21:53:19
    前端很多项目中,都有文件下载的需求,特别是JS生成文件内容,然后让浏览器执行下载操作(例如在线图片编辑、在线代码编辑、iPresst等)。 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开-》...
  • js创建对象的方式

    2018-10-23 16:28:08
    前几天面试遇到这么一道题:js面向对象的几种方式,然后百度了一下发现这个标题下全是写的js创建函数对象的方式。那就顺便了解一下这个 JavaScript创建对象的方式: 1.构造函数创建对象. 优点:自定义函数...
  • Javascript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼、富有朝气。...那就请跟我来,本文将详细描述如何使用Javascript语言进行文件操作。 一、功能实现核心:FileSystemObject 对象 其实
  • JavaScript对二进制文件操作之Blob对象

    千次阅读 2019-08-05 08:11:51
    JavaScript对二进制文件操作之Blob对象 文件操作一直是早期浏览器的痛点,全封闭式,不给JS操作的空间,而随着H5一系列新接口的推出,这个壁垒被打破。对,是一系列接口,以下会涉及到如下概念:Blob、File、...
  • 创建对象时不使用new关键字,则可能会导致原本为对象的属性和方法创建到全局变量上// 比如: var instance = Book('title','name'); // 这里Book()函数在全局作用域中执行了,而如果Book没有返回值,则instance的...
  • //JSMap.js文件  * 用于实现页面 Map 对象,Key只能是String,对象随意  */ var JSMap = function(){  this._entrys = new Array();  this.put = function(key, value){  if (key == null || key == ...
  • QML支持从JavaScript内部动态创建对象。可以做到需要时才实例化对象,从而缩短了应用程序的启动时间。它还允许根据用户输入或其他事件动态创建视觉对象并将其添加到场景。 Qt示例eDynamic Scene example 动态创建...
  • FileSystemObjectFileSystemObject是IIS 内置组件,用于访问服务器上的文件系统(比如...在创建File对象的时候,我们一般会定义一个fso对象变量,让其获得FileSystemObject对象。var fso=new ActiveXObject("Scriptin...
  • 一个 grunt 插件,用于将 Threejs json 模型文件拆分为几何文件对象 json 文件的层次结构。 与结合使用。 用法 入门 这个插件需要 Grunt ~0.4.5 如果您以前没有使用过 ,请务必查看指南,因为它解释了如何创建...
  • HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对...使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指...
  • 这个 Node.js 模块试图解决需要快速和最新访问从给定目录中的文件创建对象的问题。 创建 Mache 实例时,指定存储文件的基本目录和对象创建回调。 由您的对象创建回调创建对象会自动缓存,并从缓存中检索与给定...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 400,338
精华内容 160,135
关键字:

js创建文件对象