如何修改WebUpload上传文件默认调用系统相机,而不是手机相册?

时间:2024-04-07 15:41:15

如何修改WebUpload上传文件默认调用系统相机,而不是手机相册?

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。整体功能很强大,支持各种回调函数,方便扩展自己的UI设计。

引入资源

WebUploader实现文件上传,只需要引入3种资源:JS, CSS, SWF(swf文件会自动载入,只要你目录正确).

<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

Html部分

首先准备dom结构,包含存放文件信息的容器、选择按钮和上传按钮三个部分。

<div id="uploader" class="wu-example">

<div id="thelist" class="uploader-list"></div>

<div class="btns">

<div id="picker">选择文件</div>

<button id="ctlBtn" class="btn btn-default">开始上传</button>

</div>

</div>

初始化Web Uploader

如何修改WebUpload上传文件默认调用系统相机,而不是手机相册?上面是最简单的引入,如果不出意外的话,应该可以上传文件,如果还不可以的话,直接在官网查看教程

-----------------------分割线-----------------------

PC端测试的时候,没有问题,但是在移动端上传的时候,在选择文件的时默认是打开系统照相机,这个反人类的设计着实不好用!仔细审查了一下源代码,原来是在input上面设置了如下属性capture=camera,用编辑器打开 webupload.js 大概 4926 行,注释掉如下代码:

如何修改WebUpload上传文件默认调用系统相机,而不是手机相册?

然后在手机端测试,发现出现了多个菜单选择如下图:

如何修改WebUpload上传文件默认调用系统相机,而不是手机相册?

欢迎关注 码农之家 ,本文码农之家原创,转载请注明原文出处