现在有个用户需求是上传文件。
页面要求是:
1、文件可以多选
2、浏览文件窗口仅显示某种自定义类型的文件,比如 .osc文件
3、如果用户再次选择文件,则新选择的文件追加在上次选择的文件之后。
4、可以调整已经选择的文件的排列顺序。
现在有没有能解决类似需求的插件?不希望用flash,HTML和js\css做的最好了
HTML5可以进行1、2(好像指定类型可以,自定义类型不行,如果有麻烦提醒我用的是哪个API),但是并不是客户方的浏览器都支持html5。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
针对您的需求,虽然HTML5提供了原生的File API来处理文件上传,但要完全满足您的所有要求,可能需要结合一些JavaScript库或自定义代码来实现。以下是一些建议和推荐的库:
多选文件:HTML5的<input type="file">
元素通过设置multiple
属性即可支持多选文件。
过滤特定类型文件:可以通过在<input>
标签中使用accept
属性来指定允许选择的文件类型。对于自定义文件类型(如.osc
),这应该可以工作,尽管某些浏览器可能对非标准或未知类型的支持有限。示例代码如下:
<input type="file" multiple accept=".osc">
追加选择的文件:原生HTML不直接支持此功能,但你可以通过JavaScript监听change
事件,将新选择的文件追加到已有列表中。可以使用FormData对象来构建最终的上传数据。
调整已选文件顺序:这通常需要前端JavaScript来实现。你可以创建一个UI界面(比如使用拖拽排序),让用户能够调整文件顺序,并在后台用JavaScript动态更新存储文件的数组或对象。
考虑到兼容性和便利性,您可以考虑使用成熟的JavaScript库,如Dropzone.js、jQuery File Upload或者更现代的Uppy等,这些库都支持高度定制且有较好的浏览器兼容性。特别是Uppy,它非常灵活,可以很容易地通过插件系统来扩展功能,满足您提到的所有需求,包括文件筛选、拖拽排序等。
@uppy/file-manager
用于管理文件,@uppy/drag-drop
用于拖放,@uppy/progress-bar
显示上传进度等。你可能需要编写少量自定义代码来实现特定的文件类型过滤和排序逻辑,但Uppy的灵活性使得这相对容易。请根据你的具体需求和项目环境选择合适的解决方案。如果决定采用纯JavaScript实现,记得充分测试不同浏览器的兼容性。