开发者社区 问答 正文

经常写HTML的小伙伴,求文件上传插件页面:报错

现在有个用户需求是上传文件。

页面要求是:

1、文件可以多选

2、浏览文件窗口仅显示某种自定义类型的文件,比如 .osc文件

3、如果用户再次选择文件,则新选择的文件追加在上次选择的文件之后。

4、可以调整已经选择的文件的排列顺序。

现在有没有能解决类似需求的插件?不希望用flash,HTML和js\css做的最好了

HTML5可以进行1、2(好像指定类型可以,自定义类型不行,如果有麻烦提醒我用的是哪个API),但是并不是客户方的浏览器都支持html5。



展开
收起
kun坤 2020-06-14 09:03:01 540 分享 版权
阿里云 AI 助理回答

针对您的需求,虽然HTML5提供了原生的File API来处理文件上传,但要完全满足您的所有要求,可能需要结合一些JavaScript库或自定义代码来实现。以下是一些建议和推荐的库:

  1. 多选文件:HTML5的<input type="file">元素通过设置multiple属性即可支持多选文件。

  2. 过滤特定类型文件:可以通过在<input>标签中使用accept属性来指定允许选择的文件类型。对于自定义文件类型(如.osc),这应该可以工作,尽管某些浏览器可能对非标准或未知类型的支持有限。示例代码如下:

    <input type="file" multiple accept=".osc">
    
  3. 追加选择的文件:原生HTML不直接支持此功能,但你可以通过JavaScript监听change事件,将新选择的文件追加到已有列表中。可以使用FormData对象来构建最终的上传数据。

  4. 调整已选文件顺序:这通常需要前端JavaScript来实现。你可以创建一个UI界面(比如使用拖拽排序),让用户能够调整文件顺序,并在后台用JavaScript动态更新存储文件的数组或对象。

考虑到兼容性和便利性,您可以考虑使用成熟的JavaScript库,如Dropzone.jsjQuery File Upload或者更现代的Uppy等,这些库都支持高度定制且有较好的浏览器兼容性。特别是Uppy,它非常灵活,可以很容易地通过插件系统来扩展功能,满足您提到的所有需求,包括文件筛选、拖拽排序等。

  • Uppy: https://uppy.io/ Uppy 提供了一个易于使用的API,以及丰富的插件生态系统,例如@uppy/file-manager用于管理文件,@uppy/drag-drop用于拖放,@uppy/progress-bar显示上传进度等。你可能需要编写少量自定义代码来实现特定的文件类型过滤和排序逻辑,但Uppy的灵活性使得这相对容易。

请根据你的具体需求和项目环境选择合适的解决方案。如果决定采用纯JavaScript实现,记得充分测试不同浏览器的兼容性。

有帮助
无帮助
AI 助理回答生成答案可能存在不准确,仅供参考
0 条回答
写回答
取消 提交回答