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

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

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 上传多个文件

<input type="file" multiple />

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

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

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

preventDefault和return false组织默认行为
不使用submit类型的提交按钮，换成普通按钮
添加一个空的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 几种读取方式

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

3.2 几个事件

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

```progress``事件，每个50ms左右会触发一次，触发时尽管可能没有包含全部数据，但也可以获取部分内容了
error事件，由于某些原因无法读取文件时触发
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的美化

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

另外新建一个button标签。给它设置想要的样式效果
将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;
}

文件/图片的上传怎么做相关推荐

maven 项目 springMVC实现文件图片的上传下载功能详解（源码已提供，小白必看）
文件上传是项目开发中最常见的功能之一 ,springMVC 可以很好的支持文件上传,但是SpringMVC上下文中默认没有装配MultipartResolver,因此默认情况下其不能处理文件上传工作. ...
文件(图片,音频)上传OSS并返回上传地址
为了加快速度这里用多线程 package cn.oss.test;import java.io.InputStream; import java.util.concurrent.Callable; i ...
html七牛云图片文件上传,使用Js将文件图片视频上传到七牛云详细教程-Fun言
前言因为项目需要,需要将一些较大文件上传到七牛云,以前都是通过数据流上传到服务端,然后在服务端进行上传操作,因为以前文件都很小所以无所谓,但是要是几百M的文件就不行了,所以就采用前端js直接上传到七 ...
关于这些年做的图片上传下载做的处理总结（including根据图片url上传文件）
下载文档我们查柜的认知是后端给前端传一个链接地址,将地址放在a标签上,点击链接下载文件. 可有时候往往不是这样的,后端给前端返回了一个文档流,这就需要我们自己转换为Blob格式的数据,再使用这个数据 ...
php ios视频文件上传,iOS实现视频和图片的上传思路
关于iOS如何实现视频和图片的上传, 我们先理清下思路,然后小编根据思路一步一步给大家详解实现过程. 思路: #1. 如何获取图片? #2. 如何获取视频? #3. 如何把图片存到缓存路径中? #4. ...
js 导出pdf上传至oss_前端上传图片到oss，压缩图片后上传至oss（补充图片文件旋转90度问题）...
上传图片如果过大,等待时间过长体验不好,于是使用js压缩图片再上传,无关图片清晰度. /** * 压缩图片 * @param file 图片文件 * @param callback 回调函数,压缩完要 ...
多文件断点续传，上传视频自动转MP4和截图，图片格式转换
功能:自己写的一个组件,根据调用传过来的的fileType判断是上传视频还是图片还是音频.可以选择多文件上传,同时也可以暂停,继续,取消,断网重连续传.如果上传的是视频,会自动转为mp4,自动截取一帧 ...
面试官：大文件上传如何做断点续传？
一.是什么不管怎样简单的需求,在量级达到一定层次时,都会变得异常复杂文件上传简单,文件变大就复杂上传大文件时,以下几个变量会影响我们的用户体验服务器处理数据的能力请求超时网络波动上传时间 ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...

文件/图片的上传怎么做

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

1.1 读取type=file的值

1.2 上传多个文件

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

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

2、FormData

2.1 基本用法

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

2.3 使用ajax 发送数据

2.4 使用XHR发送数据

2.4 FormData看不到数据

3、FileReader

3.1 几种读取方式

3.2 几个事件

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

4、input=file的美化

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

文件/图片的上传怎么做相关推荐

最新文章

热门文章

文件/图片的上传 怎么做

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

1.1 读取type=file的值

1.2 上传多个文件

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

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

2、FormData

2.1 基本用法

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

2.3 使用ajax 发送数据

2.4 使用XHR发送数据

2.4 FormData看不到数据

3、FileReader

3.1 几种读取方式

3.2 几个事件

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

4、input=file的美化

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

文件/图片的上传 怎么做相关推荐

最新文章

热门文章

文件/图片的上传怎么做

文件/图片的上传怎么做相关推荐