前端文件上传

一丶前端文件上传方式

前端网页文件上传一般使用 来实现。
在 HTML 文档中： <input type="file" />标签每出现一次，一个 FileUpload 对象就会被创建。该标签包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件,该标签的 value属性保存了用户指定的文件的名称。
多选： 标签可以通过添加 multiple 属性来支持多选；如果选择了多个文件, 这个值表示第一个被选择的文件路径. JavaScript 可以通过 Input 的 FileList属性获取到其他的文件路径.
文件信息：可以通过 input.files 属性返回 — 返回值是一个 FileList 对象,这个对象是一个包含了许多 File 文件的列表，列表包含图片的name，type，size 等属性。
限制文件类型：你可以使用 input 的 accept 属性，accept 属性接受一个逗号分隔的 MIME 类型字符串。如: accept=“image/png, image/jpeg” or accept=".png, .jpg, .jpeg" — PNG/JPEG
选择文件：会触发input的onchange事件;
上传：上传文件前 使用FileReader对象读取指定file的文件，并将文件转换为二进制字符串, 并将xhr对象, overrideMimeType 属性设置为text/plain; charset=x-user-defined-binary, 最终后台接收到二进制后再做具体处理。

第一种：经典的form和input上传

设置form的aciton为后端页面，必填项：enctype=“multipart/form-data”，type=‘post’

<form action='uploadFile.php' enctype="multipart/form-data" type='post'>
　　<input type='file'>
　　<input type='hidden' name='userid'>　　
　　<input type='hidden' name='signature'>
　　<button>提交</button>
</form>

使用input选择文件，设置好其他input的值，点击提交，将文件数据及签名等认证信息发送到form设置的action对应的页面，浏览器也会跳转到该页面。触发form表单提交数据的方式有2种，一种是在页面上点击button按钮或按钮触发，第二种是在js中执行form.submit()方法。
优点：使用简单方便，兼容性好，基本所有浏览器都支持。
缺点： 1. 提交数据后页面会跳转（下面会讲如何禁止页面跳转）。
2.因为是浏览器发起的请求，不是一个ajax，所以前端无法知道什么时候上传结束。
3. form表单里发送除文件外的数据，一般是新建一个type=hidden的input，value=‘需要传的数据’，每发送一个数据就需要一个input，一旦多了就会使得dom看起来比较冗余。
小技巧：
form表单提交数据后会自动跳转到action指定的页面，为了禁止页面跳转，可以在页面中新建一个空的ifame，比如name=‘upload’，然后设置form的target=“Uploader”，form有一个target的属性，规定在何处打开action，这样form提交数据后就会仍停留在当前页。代码如下：

<form action='uploadFile.url' enctype="multipart/form-data" type='post' target="uploaderPage">
	<input type='file'>
	<button>提交</button>
</form>
<ifrmae name='upload' id='uploaderPage'></iframe>

这样写的另一个好处是，可以知道什么时候上传完成并接收到后端的回调结果。比如上面这个例子，文件数据发送到了 ‘uploadFile.url’，假设该页面处理完数据后返回了一个地址，该地址会被写入到之前的iframe中。所以在ifame的onload函数触发时，也就是上传完成后，可以在iframe中读取到后端返回的数据。

var iframe = document.getElementById('uploadPage');
iframe.onload = function () {
	var doc = window.frames['uploaderPage'].document;
	var pre = doc.getElementsByTagName('pre');
	var obj = JSON.parse(pre[0].innerHTML);
}

使用这种方法时需要注意，iframe有跨域限制，创建出来的iframe的地址如果和当前页面地址不同源，会报错。这种情况下，建议大家在iframe的onload函数中，再次向后端请求一个接口获取文件地址，而不是直接去iframe里读取。或者返回这样的数据。

<script type="text/javascript">
	window.top.window.callback(data)
</script>

callback是和