Webuploader教程(一)------简单实用上传功能
2017-09-21 11:41
417 查看
Webuploader教程(一)——简单实用上传功能
<div class="article_manage clearfix"> <div class="article_r"> <span class="link_postdate">2015-09-27 09:41</span> <span class="link_view" title="阅读次数">45825人阅读</span> <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(12)</span> <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('Webuploader%e6%95%99%e7%a8%8b%ef%bc%88%e4%b8%80%ef%bc%89------%e7%ae%80%e5%8d%95%e5%ae%9e%e7%94%a8%e4%b8%8a%e4%bc%a0%e5%8a%9f%e8%83%bd','48765151');return false;" title="收藏" target="_blank">收藏</a></span> <span class="link_report"> <a href="#report" onclick="javascript:report(48765151,2);return false;" title="举报">举报</a></span> </div> </div> <style type="text/css"> .embody{ padding:10px 10px 10px; margin:0 -20px; border-bottom:solid 1px #ededed; } .embody_b{ margin:0 ; padding:10px 0; } .embody .embody_t,.embody .embody_c{ display: inline-block; margin-right:10px; } .embody_t{ font-size: 12px; color:#999; } .embody_c{ font-size: 12px; } .embody_c img,.embody_c em{ display: inline-block; vertical-align: middle; } .embody_c img{ width:30px; height:30px; } .embody_c em{ margin: 0 20px 0 10px; color:#333; font-style: normal; } </style> <script type="text/javascript"> $(function () { try { var lib = eval("("+$("#lib").attr("value")+")"); var html = ""; if (lib.err == 0) { $.each(lib.data, function (i) { var obj = lib.data[i]; //html += '<img src="' + obj.logo + '"/>' + obj.name + " "; html += ' <a href="' + obj.url + '" target="_blank">'; html += ' <img src="' + obj.logo + '">'; html += ' <em><b>' + obj.name + '</b></em>'; html += ' </a>'; }); if (html != "") { setTimeout(function () { $("#lib").html(html); $("#embody").show(); }, 100); } } } catch (err) { } }); </script> <div class="category clearfix"> <div class="category_l"> <img src="http://static.blog.csdn.net/images/category_icon.jpg"> <span>分类:</span> </div> <div class="category_r"> <label onclick="GetCategoryArticles('5748427','Mooner_guo','top','487 4000 65151');"> <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">前端<em>(7)</em></span> <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;"> <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;"> <div class="subItem"> <div class="subItem_t"><a href="http://blog.csdn.net/Mooner_guo/article/category/5748427" target="_blank">作者同类文章</a><i class="J_close">X</i></div> <ul class="subItem_l" id="top_5748427"> </ul> </div> </label> </div> </div> <div class="bog_copyright"> <p class="copyright_p">版权声明:本文为博主原创文章,未经博主允许不得转载。</p> </div>
webuplader是百度的一个前端开源上传插件,支持加密、分片上传。还是阔以的。
不过文档写的实在是不敢恭维,挫到爆,gettting start介绍快速开始,写的都是缺少东西的,直接复制下来是不可以运行的。
总结出一个经验,测试html最好还是使用jsp,不然修改了页面,浏览器上总是有缓存,清缓存是个很蛋疼的事情。
1. 引如外部资源 css,js文件
这里${ctxStatic}不要管,这个只是spring项目中使用el表达式来写静态文件前缀了。使用的话,测试的话直接写死绝对路即可。
[html] view plain copy print?<span style=“font-size:14px;”> <link href=“{ctxStatic }/bootstrap-3.3.5-dist/css/bootstrap.min.css"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text/css"</span><span> </span><span class="attribute">rel</span><span>=</span><span class="attribute-value">"stylesheet"</span><span class="tag">/></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">link</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"{ctxStatic }/webupload/css/webuploader.css” type=“text/css” rel=“stylesheet”/>
<script type=“text/javascript” src=“{ctxStatic }/jquery/jquery-1.9.1.min.js"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">script</span><span class="tag">></span><span> </span></span></li><li class=""><span> <span class="tag"><</span><span class="tag-name">script</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text/javascript"</span><span> </span><span class="attribute">src</span><span>=</span><span class="attribute-value">"{ctxStatic }/webupload/webuploader.min.js”></script>
<script type=“text/javascript” src=“{ctxStatic }/bootstrap-3.3.5-dist/js/bootstrap.min.js"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">script</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">span</span><span class="tag">></span><span> </span></span></li></ol></div><pre name="code" class="html" style="display: none;"><span style="font-size:14px;"> <link href="{ctxStatic }/bootstrap-3.3.5-dist/css/bootstrap.min.css” type=”text/css” rel=”stylesheet”/>
<link href=”ctxStatic/webupload/css/webuploader.css”type=”text/css”rel=”stylesheet”/><scripttype=”text/javascript”src=”{ctxStatic }/jquery/jquery-1.9.1.min.js”></script>
<script type=”text/javascript” src=”ctxStatic/webupload/webuploader.min.js”></script><scripttype=”text/javascript”src=”
list=(</span><span class="string">"#thelist"</span><span>); </span><span class="comment">//这几个初始化全局的百度文档上没说明,好蛋疼。</span><span> </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> btn =(</span><span class="string">"#ctlBtn"</span><span>); </span><span class="comment">//开始上传</span><span> </span></span></li><li class=""><span> <span class="keyword">var</span><span> thumbnailWidth = 100; </span><span class="comment">//缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档</span><span> </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> thumbnailHeight = 100; </span></span></li><li class=""><span> </span></li><li class="alt"><span> <span class="keyword">var</span><span> uploader = WebUploader.create({ </span></span></li><li class=""><span> <span class="comment">// 选完文件后,是否自动上传。</span><span> </span></span></li><li class="alt"><span> auto: <span class="keyword">false</span><span>, </span></span></li><li class=""><span> </span></li><li class="alt"><span> <span class="comment">// swf文件路径</span><span> </span></span></li><li class=""><span> swf: <span class="string">'${ctxStatic }/webupload/Uploader.swf'</span><span>, </span></span></li><li class="alt"><span> </span></li><li class=""><span> <span class="comment">// 文件接收服务端。</span><span> </span></span></li><li class="alt"><span> server: <span class="string">'/apm-web/a/test/'</span><span>, </span></span></li><li class=""><span> </span></li><li class="alt"><span> <span class="comment">// 选择文件的按钮。可选。</span><span> </span></span></li><li class=""><span> <span class="comment">// 内部根据当前运行是创建,可能是input元素,也可能是flash.</span><span> </span></span></li><li class="alt"><span> pick: <span class="string">'#filePicker'</span><span>, </span></span></li><li class=""><span> </span></li><li class="alt"><span> <span class="comment">// 只允许选择图片文件。</span><span> </span></span></li><li class=""><span> accept: { </span></li><li class="alt"><span> title: <span class="string">'Images'</span><span>, </span></span></li><li class=""><span> extensions: <span class="string">'gif,jpg,jpeg,bmp,png'</span><span>, </span></span></li><li class="alt"><span> mimeTypes: <span class="string">'image/*'</span><span> </span></span></li><li class=""><span> }, </span></li><li class="alt"><span> method:<span class="string">'POST'</span><span>, </span></span></li><li class=""><span> }); </span></li><li class="alt"><span> <span class="comment">// 当有文件添加进来的时候</span><span> </span></span></li><li class=""><span> uploader.on( <span class="string">'fileQueued'</span><span>, </span><span class="keyword">function</span><span>( file ) { </span><span class="comment">// webuploader事件.当选择文件后,文件被加载到文件队列中,触发该事件。等效于 uploader.onFileueued = function(file){...} ,类似js的事件定义。</span><span> </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> $li = $( </span></span></li><li class=""><span> <span class="string">'<div id="'</span><span> + file.id + </span><span class="string">'" class="file-item thumbnail">'</span><span> + </span></span></li><li class="alt"><span> <span class="string">'<img>'</span><span> + </span></span></li><li class=""><span> <span class="string">'<div class="info">'</span><span> + file.name + </span><span class="string">'</div>'</span><span> + </span></span></li><li class="alt"><span> <span class="string">'</div>'</span><span> </span></span></li><li class=""><span> ), </span></li><li class="alt"><span> $img = $li.find(<span class="string">'img'</span><span>); </span></span></li><li class=""><span> </span></li><li class="alt"><span> </span></li><li class=""><span> <span class="comment">// $list为容器jQuery实例</span><span> </span></span></li><li class="alt"><span> $list.append( $li ); </span></li><li class=""><span> </span></li><li class="alt"><span> <span class="comment">// 创建缩略图</span><span> </span></span></li><li class=""><span> <span class="comment">// 如果为非图片文件,可以不用调用此方法。</span><span> </span></span></li><li class="alt"><span> <span class="comment">// thumbnailWidth x thumbnailHeight 为 100 x 100</span><span> </span></span></li><li class=""><span> uploader.makeThumb( file, <span class="keyword">function</span><span>( error, src ) { </span><span class="comment">//webuploader方法</span><span> </span></span></li><li class="alt"><span> <span class="keyword">if</span><span> ( error ) { </span></span></li><li class=""><span> $img.replaceWith(<span class="string">'<span>不能预览</span>'</span><span>); </span></span></li><li class="alt"><span> <span class="keyword">return</span><span>; </span></span></li><li class=""><span> } </span></li><li class="alt"><span> </span></li><li class=""><span> $img.attr( <span class="string">'src'</span><span>, src ); </span></span></li><li class="alt"><span> }, thumbnailWidth, thumbnailHeight ); </span></li><li class=""><span> }); </span></li><li class="alt"><span> <span class="comment">// 文件上传过程中创建进度条实时显示。</span><span> </span></span></li><li class=""><span> uploader.on( <span class="string">'uploadProgress'</span><span>, </span><span class="keyword">function</span><span>( file, percentage ) { </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> $li = $( </span><span class="string">'#'</span><span>+file.id ), </span></span></li><li class=""><span> $percent = $li.find(<span class="string">'.progress span'</span><span>); </span></span></li><li class="alt"><span> </span></li><li class=""><span> <span class="comment">// 避免重复创建</span><span> </span></span></li><li class="alt"><span> <span class="keyword">if</span><span> ( !$percent.length ) { </span></span></li><li class=""><span> $percent = $(<span class="string">'<p class="progress"><span></span></p>'</span><span>) </span></span></li><li class="alt"><span> .appendTo( $li ) </span></li><li class=""><span> .find(<span class="string">'span'</span><span>); </span></span></li><li class="alt"><span> } </span></li><li class=""><span> </span></li><li class="alt"><span> $percent.css( <span class="string">'width'</span><span>, percentage * 100 + </span><span class="string">'%'</span><span> ); </span></span></li><li class=""><span> }); </span></li><li class="alt"><span> </span></li><li class=""><span> <span class="comment">// 文件上传成功,给item添加成功class, 用样式标记上传成功。</span><span> </span></span></li><li class="alt"><span> uploader.on( <span class="string">'uploadSuccess'</span><span>, </span><span class="keyword">function</span><span>( file ) { </span></span></li><li class=""><span> $( <span class="string">'#'</span><span>+file.id ).addClass(</span><span class="string">'upload-state-done'</span><span>); </span></span></li><li class="alt"><span> }); </span></li><li class=""><span> </span></li><li class="alt"><span> <span class="comment">// 文件上传失败,显示上传出错。</span><span> </span></span></li><li class=""><span> uploader.on( <span class="string">'uploadError'</span><span>, </span><span class="keyword">function</span><span>( file ) { </span></span></li><li class="alt"><span> <span class="keyword">var</span><span> $li = $( </span><span class="string">'#'</span><span>+file.id ), </span></span></li><li class=""><span> $error = $li.find(<span class="string">'div.error'</span><span>); </span></span></li><li class="alt"><span> </span></li><li class=""><span> <span class="comment">// 避免重复创建</span><span> </span></span></li><li class="alt"><span> <span class="keyword">if</span><span> ( !$error.length ) { </span></span></li><li class=""><span> $error = $(<span class="string">'<div class="error"></div>'</span><span>).appendTo( $li ); </span></span></li><li class="alt"><span> } </span></li><li class=""><span> </span></li><li class="alt"><span> $error.text(<span class="string">'上传失败'</span><span>); </span></span></li><li class=""><span> }); </span></li><li class="alt"><span> </span></li><li class=""><span> <span class="comment">// 完成上传完了,成功或者失败,先删除进度条。</span><span> </span></span></li><li class="alt"><span> uploader.on( <span class="string">'uploadComplete'</span><span>, </span><span class="keyword">function</span><span>( file ) { </span></span></li><li class=""><span> $( <span class="string">'#'</span><span>+file.id ).find(</span><span class="string">'.progress'</span><span>).remove(); </span></span></li><li class="alt"><span> }); </span></li><li class=""><span> btn.on( ’click’, function() {
console.log(”上传…”);
uploader.upload();
console.log(”上传成功”);
});
});
</script></span>
<span style="font-size:14px;"><script type="text/javascript"> $(function(){ /*init webuploader*/ var $list=$("#thelist"); //这几个初始化全局的百度文档上没说明,好蛋疼。 var $btn =$("#ctlBtn"); //开始上传 var thumbnailWidth = 100; //缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档 var thumbnailHeight = 100; var uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: false, // swf文件路径 swf: '${ctxStatic }/webupload/Uploader.swf', // 文件接收服务端。 server: '/apm-web/a/test/', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, method:'POST', }); // 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) { // webuploader事件.当选择文件后,文件被加载到文件队列中,触发该事件。等效于 uploader.onFileueued = function(file){...} ,类似js的事件定义。 var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); // $list为容器jQuery实例 $list.append( $li ); // 创建缩略图 // 如果为非图片文件,可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) { //webuploader方法 if ( error ) { $img.replaceWith('<span>不能预览</span>'); return; } $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(); }); $btn.on( 'click', function() { console.log("上传..."); uploader.upload(); console.log("上传成功"); }); }); </script></span>
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
<div id="digg" articleid="48765151"> <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();"> <dt>顶</dt> <dd>9</dd> </dl> <dl id="btnBury" class="digg digg_enable" onclick="btnburya();"> <dt>踩</dt> <dd>7</dd> </dl> </div> <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank"> </a> </div> <div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank"> </a></div> <script type="text/javascript"> function btndigga() { $(".tracking-ad[data-mod='popu_222'] a").click(); } function btnburya() { $(".tracking-ad[data-mod='popu_223'] a").click(); } </script>
相关文章推荐
- Webuploader教程(一)------简单实用上传功能
- Webuploader教程(一)------简单实用上传功能
- Webuploader教程(一)------简单实用上传功能
- [转-qq_34531925]Webuploader教程(一)——简单实用上传功能
- Primefaces(JSF2)实现简单显示上传文件列表功能
- 七牛云的简单实用(上传图片到云存储并拿到地址写入数据库)
- query AjaxUpload实现多文件上传功能代码实例教程
- 使用wampserver搭建 WAMP 平台超简单实用教程
- Android实战简易教程-第二十七枪(Android设置头像上传功能实现)
- FusionCharts简单教程(七)-----使用FusionCharts实现下钻功能
- 简单实现java上传图片文件功能
- 简单!!!!kindeditor隐藏上传图片框网络图片或本地上传的功能
- Git简单实用教程(一)-Git简介
- maven 简单实用教程
- 用jsp实现简单的图片上传功能
- Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
- maven 简单实用教程
- [长期更新] Linux简单实用的功能
- php简单的文件上传功能,不限制上传大小
- windows 之PHP.INI配置:文件上传功能配置教程