利用HTML5+的API实现基于MUI的文件上传

     项目中需要用到图片上传,昨天搞整了一下,对我这个菜鸟来说,还是有很多值得注意的地方。

       h5+提供了可以调用原生安卓API的功能,当然也能调用camera。需要注意的是,拍照后的保存路径如果不自己设置的话,是使用的hbuilder默认的路径。不过,我把路径打印出来,在genymotion里面居然没有翻到。还有一点,通过h5+调用拍照后照片也不会保存到相册​,但是在真机上是会自动保存的,为了以防万一,可以设置图片保存到本地相册。不多说,贴代码。

利用HTML5+的API实现基于MUI的文件上传_第1张图片 页面打开时需要在plus中预加载,这里新建文件夹camera

       plus.camera.getCamera返回摄像头管理对象,之后可以对拍照参数进行设置,拍照成功会调用回调函数。使用resolveLocalFileSystemURL可以通过URL参数获取目录对象或文件对象,把entry转换成本地路径之后就可以保存啦。

利用HTML5+的API实现基于MUI的文件上传_第2张图片 拍摄照片

       通过相册选择照片的方式和获取摄像头的操作差不多,在这里我给了一个f1的全局数组变量。用来存放选择的照片。哦,单选的话就不用数组了可以。多选和单选,可以通过GalleryOptions对象来进行设置:multiple: true.还可以进行好多好多设置。

利用HTML5+的API实现基于MUI的文件上传_第3张图片 相册选择照片

       好了现在可以进行图片上传了,在这里使用的是二进制流的形式进行上传,同时为了节约资源,有必要对图片进行压缩,这个代码我是扒的DCould论坛上面的。利用canvas对图片进行重绘,要压缩多小,修改w = 320 || w;的数字就行了,我这里是320,300多K的图片传到后台也就150K了。不过可以更小,最好注意按比例压缩。哦,这里是需要导入jquery.min.js的包的,attr是jquery下的方法,不然用不了。每次压缩完成之后,用push方法把图片流追加进数组就行了。

利用HTML5+的API实现基于MUI的文件上传_第4张图片 压缩图片

       好了可以上传啦,上传利用的是mui封装的post方法,跟ajax其实是一样的。h5+其实提供了很多上传方法,比如有一个uploader的接口,也可用来上传,c#的话,可以用handler来接收,不过我不怎么熟悉,需要好好研究研究。

利用HTML5+的API实现基于MUI的文件上传_第5张图片 上传

       接下来就是后台接收了,在这里使用的是mvc,前端直接请求action,返回图片数组,在转换成图片之前,base64的格式需要把开头一段去掉。不然会报格式错误的。在保存进文件夹的时候,之前代码老是报错:GDI+中发生一般性错误,就是这个。在网上搜索了好久,解决办法为克隆一个bitmap对象,同时Dispose来及时释放掉打开的文件(c#的话使用using{}来限定也可以),不过这个解决方法的应用场景为从文件夹读出然后写入。图片上传还用不到克隆bitmap,最后在我们老大的提示下终于发现,iis对文件夹的写入进行了限制,需要去开启权限,就是要把everyone的权限添加上去,同时还要赋予完全控制权限。这样就可以顺利进行文件写入的操作啦。

利用HTML5+的API实现基于MUI的文件上传_第6张图片 c#后台接收

       贴一个克隆bitmap的方法,与这次的图片上传没啥关系,留着以后能用到。

利用HTML5+的API实现基于MUI的文件上传_第7张图片 bitmap转换

​       最后,我还要感谢老大,以及其他小伙伴,在工作中给了我很多帮助,有这么一群小伙伴在一起真的太好啦!

你可能感兴趣的:(mui,上传下载)