web Uploader 上传插件
本插件基于jQuery和webuploader完成
webuploader下载路径:http://fex.baidu.com/webuploader/download.html
下载完成后将整个包放在你的项目中,然后再引用里面的webuploader.js
html
<div class="k_picture_n" id=“uppicker”>
<img src="images/Folder.png" >
</div>
调用方式
/*以下参数需要就传,不需要则不传*/
$("#uppicker").InitUploader({
btntext: "",
bid:that.bid,
classid:class_id,
multiple: true,
water: false,
thumbnail: true,
http:"图片显示所需请求头,如不需要可不传",
sendurl: "上传图片接口",
});
js
$(function(){
//初始化
$.upLoadDefaults = $.upLoadDefaults || {};
$.upLoadDefaults.property = {
multiple: false, //是否多文件
water: false, //是否加水印
thumbnail: false, //是否生成缩略图
sendurl: null, //发送地址
filetypes: "jpg,jpge,png,gif", //文件类型
filesize: "30720", //文件大小
btntext: "上传图片", //上传按钮的文字
classid:"", //当前目录ID
bid:"",//自定义参数bid
http:'',//请求头
swf: "/webuploader-0.1.5/Uploader.swf" //SWF上传控件相对地址,上传SWF需要用到的文件
};
$.fn.InitUploader = function(b){
var fun = function (parentObj) {
var p = $.extend({}, $.upLoadDefaults.property, b || {});
var btnObj = $('<div>' + p.btntext + '</div>').appendTo(parentObj);
var index = 0;
//初始化属性
p.sendurl += "?action=UpLoadFile";
if (p.water) {
p.sendurl += "&IsWater=1";
}
if (p.thumbnail) {
p.sendurl += "&IsThumbnail=1";
}
//if (!p.multiple) {
// p.sendurl += "&DelFilePath=" + parentObj.siblings(".upload-path").val();
//}
//初始化WebUploader
var uploader = WebUploader.create({
auto: true, //自动上传
swf: './webuploader-0.1.5/Uploader.swf', //SWF路径
server: p.sendurl, //上传地址
pick: {
id: btnObj,
multiple: p.multiple
},
accept: {
title: 'Images',
extensions: p.filetypes,
mimeTypes: 'image/*'
},
// compress: false,//不启用压缩
// resize: false,//尺寸不改变
compress: {
width: 1080,
height: 1920,
// 图片质量,只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大,则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节,如果图片大小小于此值,不会采用压缩。
compressSize: 0
},
thumb: {
width: 118,
height: 118,
// 图片质量,只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type: 'image/jpeg'
},
formData: {
'type1': 'upFile', //定义参数
'class_id': p.classid,
'bid':p.bid
},
fileVal: 'file', //上传域的名称
method: 'post',
fileNumLimit : 30,
fileSizeLimit: p.filesize * 1024 *30,
fileSingleSizeLimit: p.filesize * 1024 //文件大小
});
//当validate不通过时,会以派送错误事件的形式通知
uploader.on('error', function (type) {
switch (type) {
case 'Q_EXCEED_NUM_LIMIT':
layer.msg("错误:上传文件数量过多!");
break;
case 'Q_EXCEED_SIZE_LIMIT':
layer.msg("错误:文件总大小超出限制!");
break;
case 'F_EXCEED_SIZE':
layer.msg("错误:文件大小超出限制!");
break;
case 'Q_TYPE_DENIED':
layer.msg("错误:禁止上传该类型文件!");
break;
case 'F_DUPLICATE':
layer.msg("错误:请勿重复上传该文件!");
break;
default:
layer.msg('错误代码:' + type);
break;
}
});
//当文件加入队列前的时候触发
uploader.on('beforeFileQueued',function(file,data){
uploader.options.formData.class_id = p.classid;
});
//当有文件添加进来的时候
var _I = 0;
uploader.on('fileQueued', function (file) {
//如果是单文件上传,把旧的文件地址传过去
// console.log(file)
_I = _I+1;
$('#k_uploading').text(_I);
$('#check_two').removeClass('k_none');
$('#check_one').addClass('k_none');
var dome = $('.k_list_check');
// 创建缩略图
// 如果为非图片文件,可以不用调用此方法
uploader.makeThumb( file, function( error, src ) {
// console.log(error,src)
/*一下操作是为上传列表显示代码*/
var rHtml = '<li class="k_item_img" id="'+file.id+'">'
+'<div class="k_choice_mask">'
+'<a href="javascript:;"><img src="images/45.png" ></a>'
+'</div>'
+'<div class="upload-progress">'
+'<img src="images/2351.png" ><sapn class="progress_text"></sapn>'
+'</div>'
+'<div class="k_msk">'
+'</div>'
+'<div class="k_picture_choice">'
+'<img src="'+src+'" alt="'+file.name+'" >'
+'</div>'
+'</li>';
dome.append(rHtml);
});
});
//文件上传过程中创建进度条实时显示
uploader.on('uploadProgress', function (file, percentage) {
/*进度显示 显示类型为百分比*/
var $li = $( '#'+file.id),$text = percentage*100 +'%';
$li.find('.upload-progress').children(".progress_text").html($text);
});
// 文件上传成功,插入列表, 用样式标记上传成功。
uploader.on( 'uploadSuccess', function( file ,response ) {
// console.log(response)
/*上传成功后将图片追加到显示列表中*/
if(response.code == '100'){
index++;
var _ii = $('#k_uploading').text();
var list = response.data;
var itemDome = $('#k_images').find('.k_picture')[0];
var $li = '<div class="k_picture k_inline_block" data-type="img" data-classid="' + list.img_id +'">'
+'<div class="k_nike_mask">'
+'</div>'
+'<div class="k_nike">'
+'<a href="javascript:;"><img src="images/cha.png" ></a>'
+'</div>'
+'<div class="k_picture_n">'
+'<img class="k_src" src="'+p.http+list.path+'" alt="'+list.name+'">'
+'</div>'
+'<input type="text" name="picture-name" value="'+list.name+'" />'
+'</div>';
$(itemDome).after($li);
// $('#k_images').append($li);
$( '#'+file.id).remove();
$('#k_uploading').text(_ii -1);
if((_ii-1) < 1){
$('#check_two').addClass('k_none');
$('#check_one').removeClass('k_none');
}
uploader.removeFile(file);
}else{
/*上传失败处理*/
layer.msg(response.msg);
$( '#'+file.id).remove();
uploader.removeFile(file);
}
});
// 文件上传失败,显示上传出错。
uploader.on( 'uploadError', function( file ,response) {
// console.log(response);
uploader.removeFile(uploader.getFile(file.id));
});
// 完成上传完了,成功或者失败,先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
// console.log(file);
uploader.removeFile(file);
});
};
return $(this).each(function () {
fun($(this));
});
};
});