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

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

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

<form method="post" enctype="multipart/form-data" ><input type="file"  id="name" />
form>

1.1 读取type=file的值

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

1.2 上传多个文件

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 基本用法

   <input type="file" id="file" />

新建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

  <form id="userInfo"><input type="file" name="file" /><input type="text" name="name" /><input type="text" name="age" /><input type="text" name="sch" />form>

整体获取并添加到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 元素实现文件

<input type="file"  id="file" onchange="fileChange()" />
<img id="yulan" />

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的美化

如何对标签的展示效果进行修改。

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

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

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

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

<div clas="update-area">
<button class="upload-btn">上传头像button>
<input type="file" id="file" name="file"/>
div>

.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;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！