一丶前端文件上传方式
前端网页文件上传一般使用 来实现。
在 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是和