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));
});
};
});