文件/图片的上传怎么做

淩亂°似流年 2022-12-08 14:08 77阅读 0赞

在实际的开发当初，经常会遇到需要上传/文件图片的场景  
比如，用户头像、审核资质证明等等。

常用的文件/图片上传的方式有下面几种

# 1、form表单 enctype=“form-data” #

#### 1.1 读取type=file的值 ####

<input id="file" type="file" name="file" />
       var files=document.getElementById("file").files[0]; // 没有设置多选时的取值

#### 1.2 上传多个文件 ####

`<input type="file" multiple />`

#### 1.3 使用表单上传文件需要注意以下几点 ####

1.  `method`方式必须是`post`
2.  `form`表单的`entype`必须是`multipart/form-data`。`enctype`，属性规定数据在发送到服务器之间该如何对表单数据进行编码。默认的表单的编码方式是`application/x-www-form-urlencoded`

#### 1.4 form表单提交之后页面刷新的问题的解决 ####

1.  `preventDefault`和`return false`组织默认行为
2.  不使用`submit`类型的提交按钮，换成普通按钮
3.  添加一个空的`iframe`标签。 给`form`表单添加 ```target="default-iframe"``。给```iframe`添加属性`name="default-iframe"`。同时将这个`iframe\`\`\`设置为不可见。

# 2、FormData #

现在主流浏览器都支持FormData 对象，搭配ajax可以实现文件的上传。 IE的话，IE10以下的支持性就不太好了。

#### 2.1 基本用法 ####

新建FormData，并append()

var formData=new FormData();
        var files=document.getElementById("file").files[0] ;// 没有天际mutiple，因此使用 files[0]取值
        formData.append("file",files); //

#### 2.2 FormData需要append()多个输入项的值 ####

实际需求中，需要填写的输入项是非常多的，一项一项 `append()`效率很低。解决方法就是  
每个输入项添加属性`name`，`form`表单添加属性`id`

整体获取并添加到formdata中

var formdata=new FormData(document.getElementById("userInfo")) ;//

#### 2.3 使用ajax 发送数据 ####

$.ajax({ 
          url: "stash.php",
          type: "POST",
          data: formdata,
          cache: false,        // 不缓存数据
          processData: false,  // 不处理数据
          contentType: false， // 不设置内容类型
      })

#### 2.4 使用XHR发送数据 ####

var files=document.getElementById("file").files[0];
    var formdata=new FormData();
    formdata.append("file",files);
    
    var xhr=new XMLHttpRequest();
    xhr.open("post","ssss.php","async");
    xhr.send(formdata)

#### 2.4 FormData看不到数据 ####

把数据`append()`进`FormData`后，直接打印，看到的是一个空对象。。。。。

解决方法。需要使用`get()`才能获取FormData的内容

var file=document.getElementById("file").files[0];
     var formdata=new FormData();
     formdata.append("file",file);
     formdata.get("file"); // 获取formdata的内容

## 3、FileReader ##

是HTML5中新增的API，可以实现文件的读取，且读取过程是异步的。

#### 3.1 几种读取方式 ####

1.  `readAsText(file,encoding)`，以纯文本的形式读取文件，将读取到的文本保存在`result`属性中。第二个参数用于指定编码类型，可选。
2.  `readAsDataURI(file)`，读取文件以URL的形式保存在`result`中
3.  `readAsBinaryString(file)`，读取文件以字符串的形式保存在`result`中
4.  `readAsArrayBuffer(file)`，读取文件并将结果保存在`result`中

#### 3.2 几个事件 ####

下面是使用最多的几个事件

1.  \`\`\`progress\`\`事件，每个50ms左右会触发一次，触发时尽管可能没有包含全部数据，但也可以获取部分内容了
2.  `error`事件，由于某些原因无法读取文件时触发
3.  `load`事件，文件加载成功后触发

#### 3.3 使用FileReader实现一个图片的上传预览功能 ####

1、使用type=file 元素实现文件

2、使用FileReader读取文件，当文件加载完毕后，读取result字段，赋值给img标签的src，实现图片的展示/预览效果

function fileChange(){ 
       var filevalue=document.getElementById("file").files[0] ;// 拿到input=file的值了
       var filereader=new FileReader();
       filereader.readAsDataURL(filevalue);
    
       //
       filereader.onload=function(){ 
         document.getElmentById("yulan").setAttribute("src",filereader.result);
       }
    }

## 4、input=file的美化 ##

如何对标签`<input type="file" />`的展示效果进行修改。

1.  另外新建一个`button`标签。给它设置想要的样式效果
2.  将`input=file`元素放置到新建的`button`元素之上，并设置`opacity=0`

#### 怎么显示图片/文件名称呢？ ####

经过上面的改造之后，样式得到了升级，但是由于设置了`opacity=0`导致文件名称也看不到了。。。。。。。。。

解决方式，文件上传之后将文件添加到FormData中，读取文件名称，显示在页面上

.update-area{ 
      position:relative;
    }
    .upload-btn{ 
      width:120px;
      height:40px;
      line-height:40px;
      background-color:tomato;
      border:none;
      position:absolute;
      left:0;
    }
    #file{ 
      position:absolute;
      left:0;
      opacity:0;
    }