图片上传之webuploader和qiniuUploader

1、身份证上传（包括手持、正反面，即不同的上传按钮，单次上传一张图片）
jade上传文件部分代码

.form-group.required.identifylabel(for="identityPhotos") 证件照片：.img-btn-wrap.img-btn.img-btn1img(src="./img/review/review_img1.png", alt="").add-btn#add-btn0.addspan 手持证件照.img-btn.img-btn2img(src="./img/review/review_img2.png", alt="").add-btn#add-btn1.addspan 身份证正面.img-btn.img-btn2.img-btn3img(src="./img/review/review_img3.png", alt="").add-btn#add-btn2.addspan 身份证背面.error-msg.warning.hide.img-error 请上传证件照片

jade文件html显示样式：

上传图片后显示的样式：

使用webUploader

var $list = $('.img-btn'),identityPhotosArr = ['','',''],imgDomain = 'http://img.saihuitong.com/';$list.each(function(index){var uploader = []; //定义uploader对象uploader[index] = WebUploader.create({server: '/upload/image',pick: '#add-btn' + index,fileSingleSizeLimit: 1024*1024*30,swf: '../webuploader/Uploader.swf', // swf文件路径auto: true,duplicate: true,multiple:false, //是否可同时选择多个accept: {extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}});uploader[index].on('uploadBeforeSend', function(o, data, headers){data.imageType = 'sasReview';}); //添加自定义uploader参数（在create里面添加是没用的，不会调用）uploader[index].on('uploadSuccess', function(file, res) { //上传成功之后的回调if (res.code == 200) {var imgSrc = res.result[0];identityPhotosArr.splice(index, 1, imgSrc);removeInputErrorMsg($('.identify .img-btn-wrap'));//图片上传成功之后将图片src代替为默认图片var $imgBtn = $('.img-btn').eq(index);$imgBtn.addClass('no-border').find('img').attr({'src': imgSrc,'class': 'uploaded'}).end().find('.add-btn').addClass('hide');} else {alert(res.result);}})});

使用七牛云上传

   var $list = $('.img-btn'),identityPhotosArr = ['','',''],imgDomain = 'http://img.saihuitong.com/';$list.each(function(index){var uploader = [];uploader[index] = Qiniu.uploader({runtimes: 'html5,flash,html4',browse_button: 'add-btn' + index,chunk_size: '4mb',max_file_size: '30mb',flash_swf_url: '/assets/flash/moxie.swf',domain: imgDomain,multi_selection: false,  // 禁用多选 uptoken_url: '/rest/upload/img/token',auto_start: true,get_new_uptoken: true,filters: {mime_types : "",max_file_size: "30mb",prevent_duplicates: true},init: {FilesAdded: function(up, files) {},FileUploaded: function(up, file, info) {var result = JSON.parse(info);var imgSrc = imgDomain + result.key;  identityPhotosArr.splice(index, 1, imgSrc);removeInputErrorMsg($('.identify .img-btn-wrap'));var $imgBtn = $('.img-btn').eq(index);$imgBtn.addClass('no-border').find('img').attr({'src': imgSrc,'class': 'uploaded'}).end().find('.add-btn').addClass('hide');},Error: function(up, err, errTip) {alert(errTip);}}})})

图片上传之webuploader和qiniuUploader相关推荐

图片上传插件WebUploader的坑
需要上传图片的一个操作选择了WebUploader这个插件来实现,具体的实现过程如下. js代码: 1.引入js.css文件: <script type="text/javascrip ...
WebUploader文件图片上传插件的使用
最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...
妈蛋：kinMaxShow轮播图异常，WebUploader图片上传坑爹，图片被压缩了
2019独角兽企业重金招聘Python工程师标准>>> 今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/ ...
webuploader结合php实现图片上传到本地和保存数据库
webuploader结合php实现图片上传到本地和保存数据库,核心功能是以下三点: 一.上传前图片预览二.上传图片到本地文件夹三.上传图片路径和图片对应的设备编号到mysql数据库 Webupl ...
妈蛋：kinMaxShow旋转木马异常，WebUploader图片上传坑爹，图像被压缩
今天晚上在改造轮播图. 原来的代码是这种: <div> <img src="${static}/image/index/banner/`.jpg" /> & ...
WebUploader图片上传实例
webuploader-1.1.5 图片上传实例本插件基于 webuploader插件进行了封装,提供了三种常用视图,并对常用上传功能进行了JS封装,视图,样式,业务逻辑都已封装(JS),可以直接 ...
使用WebUploader实现图片上传
前言: 案例使用的开发工具:eclipse 不足之处希望各位大佬们多多指教(￣▽￣*)顶 1. jar包 2. js文件 <link rel="stylesheet" typ ...
springMVC+WebUploader实现多图片上传
1.webuploader的文件下载链接:http://pan.baidu.com/s/1jIdty30 密码:un47 2.spring的静态资源映射 & ...
webuploader实现批量图片上传功能
这个功能是我来新公司做的第一个工作.因为新公司的一个项目是涉及到房产中介管理系统,所以需要提供用户批量上传图片的功能.于是在网上找到了webuploader插件,调用这个api功能. WebUploa ...

图片上传之webuploader和qiniuUploader

图片上传之webuploader和qiniuUploader相关推荐

最新文章

热门文章