iu2_uploader

功能描述

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

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

依赖的模块

快速使用

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

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

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

初始化:

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

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

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

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

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

特别说明

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

版本

v1.0.0