首页 > 代码库 > 上传图片插件web upload
上传图片插件web upload
官网地址:http://fex.baidu.com/webuploader/getting-started.html
html:
<!--dom结构部分--> <div id="uploader-demo"> <!--用来存放item--> <div id="fileList" class="uploader-list"></div> <div id="filePicker">选择图片</div> </div>
css3
.webuploader-container {
position: relative;
}
.webuploader-element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
position: relative;
display: inline-block;
cursor: pointer;
background: #00b7ee;
padding: 10px 15px;
color: #fff;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.webuploader-pick-hover {
background: #00a2d4;
}
.webuploader-pick-disable {
opacity: 0.6;
pointer-events:none;
}
JavaScript
//id -> 存放图片 width,height 存放图片尺寸宽高 id2 按钮 allMaxSize图片大小 function picUpload(id,width,height,id2,allMaxSize){ var $ = jQuery, $list = $(id), // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = width * ratio, thumbnailHeight = height * ratio, //allMaxSize = 1,//限制图片大小 // Web Uploader实例 uploader; // 初始化Web Uploader uploader = WebUploader.create({ // 自动上传。 auto: true, // swf文件路径 swf: ‘E:/work/seller/public/img/common‘, // 文件接收服务端。 server: ‘http://webuploader.duapp.com/server/fileupload.php‘, // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: id2, duplicate :true,//是否可以重复上传 fileSizeLimit: allMaxSize*1024*1024, //限制图片大小,不可以超过 compress: null, // 只允许选择文件,可选。 accept: { title: ‘Images‘, extensions: ‘gif,jpg,jpeg,bmp,png‘, mimeTypes: ‘image/jpg,image/jpeg,image/png‘ //修改这行,加快上传文件框的打开速度 } }); // 当有文件添加进来的时候 uploader.on( ‘fileQueued‘, function( file ) { $list.empty(); //清空之前上传的文件 var $li = $( ‘<div id="‘ + file.id + ‘" class="file-item thumbnail">‘ + ‘<img>‘ + ‘<div class="info">‘ + file.name + ‘</div>‘ + ‘</div>‘ ), $img = $li.find(‘img‘); $list.append( $li ); // 创建缩略图 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith(‘<span>不能预览</span>‘); return; } //去掉默认的头像,清空图片名字的信息 $(‘.webuploader-pick img‘).attr(‘src‘,‘‘) $(‘.file-item .info‘).empty(); $img.attr( ‘src‘, src ); }, thumbnailWidth, thumbnailHeight ); }); // 文件上传过程中创建进度条实时显示。 uploader.on( ‘uploadProgress‘, function( file, percentage ) { var $li = $( ‘#‘+file.id ), $percent = $li.find(‘.progress span‘); // 避免重复创建 if ( !$percent.length ) { $percent = $(‘<p class="progress"><span></span></p>‘) .appendTo( $li ) .find(‘span‘); } $percent.css( ‘width‘, percentage * 100 + ‘%‘ ); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on( ‘uploadSuccess‘, function( file ) { $( ‘#‘+file.id ).addClass(‘upload-state-done‘); }); // 文件上传失败,现实上传出错。 uploader.on( ‘uploadError‘, function( file ) { var $li = $( ‘#‘+file.id ), $error = $li.find(‘div.error‘); // 避免重复创建 if ( !$error.length ) { $error = $(‘<div class="error"></div>‘).appendTo( $li ); } //$error.text(‘上传失败‘); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on( ‘uploadComplete‘, function( file ) { $( ‘#‘+file.id ).find(‘.progress‘).remove(); }); // 验证大小 uploader.on("error",function (type){ if(type == "Q_EXCEED_SIZE_LIMIT"){ window.alert("系统提示:所选图片总大小不可超过" + allMaxSize + "M哦!换个小点的文件吧!"); } // 判断传入的是不是函数 /* if( jQuery.isFunction(sideFun) ){ sideFun(type,allMaxSize); }else { //不是函数 console.log(2) return false; }*/ /* if(sideFun === ‘undefined‘){ return true; }else{ sideFun(type,allMaxSize); } */ }); } //调用 picUpload(‘#fileList‘,100,100,‘#filePicker‘,10000);
上传图片插件web upload
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。