文件上传服务器

悠悠 2022-12-08 05:42 282阅读 0赞

# Web API接口 #

## [FormData][] ##

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。

### 构造函数 ###

FormData()

### 方法 ###

appned() 向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。  
get() 返回在 FormData 对象中与给定键关联的第一个值。  
has()

## [Base64的编码与解码][Base64] ##

编码尺寸增加  
每一个Base64字符实际上代表着6比特位。因此，3字节（一字节是8比特，3字节也就是24比特）的字符串/二进制文件可以转换成4个Base64字符(4x6 = 24比特)。

这意味着Base64格式的字符串或文件的尺寸约是原始尺寸的133%（增加了大约33%）。如果编码的数据很少，增加的比例可能会更高。例如：字符串"a"的length === 1进行Base64编码后是"YQ=="的length === 4，尺寸增加了300%。

## [TypedArray][] ##

类数组对象  
一个类型化数组（TypedArray）对象描述了一个底层的二进制数据缓冲区（binary data buffer）的一个类数组视图（view）。事实上，没有名为 TypedArray 的全局属性，也没有一个名为 TypedArray 的构造函数。相反，有许多不同的全局属性，它们的值是特定元素类型的类型化数组构造函数，如下所示。在下面的页面中，你会发现一些，与包含任何类型的元素的任意类型化数组一起使用的通用属性和方法。

// create a TypedArray with a size in bytes
    const typedArray1 = new Int8Array(8);
    typedArray1[0] = 32;
    
    const typedArray2 = new Int8Array(typedArray1);
    typedArray2[1] = 42;
    
    console.log(typedArray1);
    // expected output: Int8Array [32, 0, 0, 0, 0, 0, 0, 0]
    
    console.log(typedArray2);
    // expected output: Int8Array [32, 42, 0, 0, 0, 0, 0, 0]

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>单个元素值的范围</th> 
   <th>大小(bit)</th> 
   <th>描述</th> 
   <th>Web IDL类型</th> 
   <th>C等价类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Int8Array</td> 
   <td>-128 127</td> 
   <td>1</td> 
   <td>8位2进制有符号整数</td> 
   <td>byte</td> 
   <td>int8_t</td> 
  </tr> 
  <tr> 
   <td>Unit8Array</td> 
   <td>0 255</td> 
   <td>1</td> 
   <td>8位2进制无符号整数</td> 
   <td>octed</td> 
   <td>uint8_t</td> 
  </tr> 
  <tr> 
   <td>Int16Array</td> 
   <td>-32768 to 32767</td> 
   <td>2</td> 
   <td>16位2进制无符号整数</td> 
   <td>short</td> 
   <td>uint16_t</td> 
  </tr> 
 </tbody> 
</table>

## [ArrayBuffer][] ##

ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。

它是一个字节数组，通常在其他语言中称为“byte array”。

你不能直接操作 ArrayBuffer 的内容，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。  
下面的例子创建了一个 8 字节的缓冲区，并使用一个 Int32Array 来引用它：

var buffer = new ArrayBuffer(8);
    var view   = new Int32Array(buffer);

## [Blob][] ##

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

### Constructor ###

Blob() 构造函数允许通过其它对象创建 Blob 对象。比如，用字符串构建一个 blob：  
Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。  
var aBlob = new Blob( array, options );

> 参数

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

从 Blob 中提取数据  
一种从Blob中读取内容的方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取：

var reader = new FileReader();  
reader.addEventListener(“loadend”, function() \{  
// reader.result 包含被转化为类型数组 typed array 的 blob  
\});  
reader.readAsArrayBuffer(blob);  
另一种读取Blob中内容的方式是使用Response对象。下述代码将Blob中的内容读取为文本：

var text = await (new Response(blob)).text();  
通过使用 FileReader 的其它方法可以把 Blob 读取为字符串或者数据URL。

## [File][] ##

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

通常情况下， File 对象是来自用户在一个 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互（有关详细信息，请参阅注意事项。

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

### constructor ###

File() 构造器创建新的 File 对象实例。  
var myFile = new File(bits, name\[, options\]);  
参数

1.  bits  
    一个包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。
2.  name  
    USVString，表示文件名称，或者文件路径。
3.  options 可选  
    选项对象，包含文件的可选属性。可用的选项如下：  
    type: DOMString，表示将要放到文件中的内容的 MIME 类型。默认值为 “” 。  
    lastModified: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 Date.now()。

var file = new File(["foo"], "foo.txt", { 
      type: "text/plain",
    });

### 属性 ###

lastModified 返回所引用文件最后修改日期， 为自 1970年1月1日0:00 以来的毫秒数。没有已知的最后修改时间则会返回当前时间。

//从INPUT标签读取文件
    // <input type="file" multiple id="fileInput">
    const fileInput = document.getElementById('fileInput');
    fileInput.addEventListener('change', function(event) { 
      // files is a FileList object (simliar to NodeList) 
      const files = event.target.files;
    
      for (let i = 0; i < files.length; i++) { 
        const date = new Date(files[i].lastModified);
        alert(files[i].name + ' has a last modified date of ' + date);
      }
    });
    
    //动态创建文件
    //如果文件是动态创建的，可以在构造函数new File() 中提供最后修改时间。如果未提供则会继承文件对象被创建时的Date.now() 。
    var fileWithDate = new File([], 'file.bin', { 
      lastModified: new Date(2017, 1, 1),
    });
    console.log(fileWithDate.lastModified); //returns 1485903600000
    
    var fileWithoutDate = new File([], 'file.bin');
    console.log(fileWithoutDate.lastModified); //returns current time

## [url][] ##

### Constructor ###

new URL()

### 属性 ###

hash  
host

### 方法 ###

1.  URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

返回一个DOMString ，包含一个唯一的blob链接（该链接协议为以blob:，后跟唯一标识浏览器中的对象的掩码）。

objectURL=URL.creatObjectURL(object)

> object:用于创建URL的File,Blob,MediaSource对象  
> 返回值：DOMString包含了对象URL，指定源object的内容

1.  revokeObjectURL()  
    销毁之前使用URL.createObjectURL()方法创建的URL实例。

## [在web应用程序中使用文件][web] ##

通过使用在 HTML5 中加入到 DOM 的 File API，使在web内容中让用户选择本地文件然后读取这些文件的内容成为可能。用户可以通过HTML中的 元素或者是通过拖拽来选择本地文件。

### 访问被选择的文件 ###

<input type="file" id="input" onChange="handleFiles(this)" >
    <script> const selectFile=document.getElementById("input").files[0] function handleFiles(file){ debugger; } </script>

File 对象提供了三个属性，包含了文件的有用信息。

name  
文件名称，只读字符串。只包含文件名，不包含任何路径信息。  
size  
以字节数为单位的文件大小，只读的64位整数。  
type  
文件的 MIME 类型，只读字符串，当类型不能确定时为 “”。

字节转换

let nBytes = 1000;
      let sOutput = nBytes + " bytes";
      // optional code for multiples approximation
      const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
      for (nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) { 
        sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
      }
      console.log(sOutput)

## [XMLHttpRequest][] ##

### 构造函数 ###

XMLHttpRequest()

### 属性 ###

onreadystatechange  
readystate 数字，代表请求状态  
upload 上传进度

### 方法 ###

abort() 如果请求已被发出，则立刻中止请求。  
open() 初始化一个请求。该方法只能在 JavaScript 代码中使用，  
send() 发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。

### 事件 ###

load 请求成功时触发

## [AJAX][] ##

AJAX允许只更新一个 HTML 页面的部分 DOM，而无须重新加载整个页面。AJAX还允许异步工作，这意味着当网页的一部分正试图重新加载时，您的代码可以继续运行（相比之下，同步会阻止代码继续运行，直到这部分的网页完成重新加载）。

## [FileReader][] ##

异步读取储存在计算机上的文件，使用File,Blob指定要读取的文件或数据  
其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

### 构造函数 ###

FileReader()

### 属性 ###

readyState 取值为

<table> 
 <thead> 
  <tr> 
   <th>常量名</th> 
   <th>值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>EMPTY</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>LOADING</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>DONE</td> 
   <td>2</td> 
  </tr> 
 </tbody> 
</table>

result 文件内容

### 事件 ###

onabort 处理abort事件。该事件在读取操作被中断时触发。  
onload 处理load事件。该事件在读取操作完成时触发。  
onprogess 处理progress事件。该事件在读取Blob时触发。

### 方法 ###

readAsArrayBuffer() 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.  
readAsBinaryString() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。  
readAsDataaURL() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。  
readAsString() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

## [DataTransfer][] ##

DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。关于拖放的更多信息，请参见 Drag and Drop.

这个对象可以从所有拖动事件 drag events 的 dataTransfer 属性上获取。

### constructor ###

DragEvent()

### 属性 ###

dropEffect 获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为 none, copy, link 或 move。

files 获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为 none, copy, link 或 move。

items 只读  
提供一个包含所有拖动数据列表的 DataTransferItemList 对象。

### 方法 ###

setData()  
设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。

## [DragEvent][] ##

### 属性 ###

dataTransfer 只读  
在拖放交互期间传输的数据。

### 事件 ###

drag  
拖动元素或选择文本时触发此事件。  
drop  
当在有效放置目标上放置元素或选择文本时触发此事件。  
dragenter  
当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。

var dragged;
    
      /* 可拖动的目标元素会触发事件 */
      document.addEventListener("drag", function( event ) { 
    
      }, false);
    
      document.addEventListener("dragstart", function( event ) { 
          // 保存拖动元素的引用(ref.)
          dragged = event.target;
          // 使其半透明
          event.target.style.opacity = .5;
      }, false);
    
      document.addEventListener("dragend", function( event ) { 
          // 重置透明度
          event.target.style.opacity = "";
      }, false);
    
      /* 放下目标节点时触发事件 */
      document.addEventListener("dragover", function( event ) { 
          // 阻止默认动作
          event.preventDefault();
      }, false);
    
      document.addEventListener("dragenter", function( event ) { 
          // 当可拖动的元素进入可放置的目标高亮目标节点
          if ( event.target.className == "dropzone" ) { 
              event.target.style.background = "purple";
          }
    
      }, false);
    
      document.addEventListener("dragleave", function( event ) { 
          // 当拖动元素离开可放置目标节点，重置其背景
          if ( event.target.className == "dropzone" ) { 
              event.target.style.background = "";
          }
    
      }, false);
    
      document.addEventListener("drop", function( event ) { 
          // 阻止默认动作（如打开一些元素的链接）
          event.preventDefault();
          // 移动拖动的元素到所选择的放置目标节点
          if ( event.target.className == "dropzone" ) { 
              event.target.style.background = "";
              dragged.parentNode.removeChild( dragged );
              event.target.appendChild( dragged );
          }
        
      }, false);

[FormData]: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
[Base64]: https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer
[TypedArray]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
[ArrayBuffer]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
[Blob]: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
[File]: https://developer.mozilla.org/zh-CN/docs/Web/API/File
[url]: https://developer.mozilla.org/zh-CN/docs/Web/API/URL
[web]: https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images
[XMLHttpRequest]: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
[AJAX]: https://developer.mozilla.org/zh-CN/docs/Glossary/AJAX
[FileReader]: https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
[DataTransfer]: https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer
[DragEvent]: https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent/DragEvent