利用HTML5+的API实现基于MUI的文件上传_dssy的一点儿笔记_新浪博客

利用HTML5+的API实现基于MUI的文件上传_dssy的一点儿笔记_新浪博客,dssy的一点儿笔记,

来源： 利用HTML5+的API实现基于MUI的文件上传_dssy的一点儿笔记_新浪博客

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

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

页面打开时需要在plus中预加载，这里新建文件夹camera

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

拍摄照片

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

相册选择照片

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

压缩图片

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

上传

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

C#后台接收

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

bitmap转换

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