iu2_uploader

功能描述

本模块实现多图片上传，将图片转成base64编码再上传，主要解决图片上传和表单提交不同步问题，本模块将需要上传的图片转成base64编码，可以把图片数据作为表单的一个字段通过ajax提交到后台。后台可以将base64编码直接存入数据库或者转换成文件保存；

支持预览和移除，点击缩略图可以全屏展示图片，再次点击返回；点击缩略图右上角的X移除该图片。

依赖的模块

无

快速使用

引入样式文件iu2_uploader.css，引入脚本文件iu2_uploader.js，同时还需要引入jquery库； 在页面上加入如下html代码片段：

  1.   <ul class="iu2-uploader__files" id="uploadfiles"></ul>
  2.   <div class="iu2-uploader__input-box">
  3.     <input type="file" name="fileToUpload" id="fileToUpload"  class="iu2-uploader__input" accept="image/*;capture=camera" multiple/>
  4.   </div>
  5.   <div style="clear:both;"></div>

其中id=”uploadfiles”存放预览图片容器，id=”fileToUpload”是选择文件元素

初始化：

  1. iu2_uploader.initUploader($("#uploadfiles"),$("#fileToUpload"));

initUploader方法第一个参数是图片预览容器，第二个参数是选择文件元素

获取需要上传的图片base64数组

  1. var imgs = iu2_uploader.getImages($("#uploadfiles"));

getImages方法的参数是图片预览容器，返回一个数据组，数组中的每个元素就是一个图片的base64编码，提交到后台可以存入数据库或者转成文件保存。

特别说明

本模块需要使用jquery库，或者使用zepto库也可以，在微信中可以很好的使用，只需要引入脚本和样式文件即可，android/ios都支持。

版本

v1.0.0