web Uploader 图片上传插件

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

    };   

});