现在的位置: 首页 > 综合 > 正文

html5多文件上传预览及进度条 思路

2017年11月20日 ⁄ 综合 ⁄ 共 646字 ⁄ 字号 评论关闭

本文只考虑html5环境。因为本人的编程信条是,一切都要尽可能的简单。因此面对老旧的html4我是持摒弃态度。

html5的file控件支持multiple属性,但是可惜它的功能实在太有限了,它的multiple的意思是在同一次选择文件对话框中,可以多选文件,而不是通过可以打开多个文件选择对话框来选择多个文件。这样导致如果要多文件的话,必须这些文件在同一个文件夹下才能被多选上。因此这个multiple属性不靠谱。

关于文件上传进度条,使用XMLHttpRequest对象来上传文件并提供上传过程信息给浏览器客户端。

综合以上的条件限制,解决思路就产生了:

首先文件必须先于表单提交,而不是与表单同步。否则不仅用户体验很差,而且前端实现起来也非常麻烦(因为这样每选择一个文件,就需要再动态生成一个隐藏的新file控件)。

每当用户点击file控件时,使用change事件监测用户选择文件行为。在该事件中,将文件立刻进行ajax上传。这些文件存在于临时文件表中(我用数据库存文件,原因就是因为简单),上传成功后会返回该文件的主键到页面中,以便作为表单提交时文件参数。

至于预览,在html5中就太容易了,因为html5有个文件读取api,直接从用户磁盘上读取所选取的文件。而且通过判断文件的类型,如果是图片的话,就可以将它转成base64 URL型图片,直接显示在页面上。

当在表单中删除已选择的文件时,直接从页面表单提交参数中删除对应的主键即可,无需再从数据库中删除。因为我的临时文件表会定期清除过期文件。

抱歉!评论已关闭.