[转-qq_34531925]Webuploader教程(一)——简单实用上传功能
2017-09-29 10:16
369 查看
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','48765151');"> <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
<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”> 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>
[javascript] view
plain copy
<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教程(一)------简单实用上传功能
- Webuploader教程(一)------简单实用上传功能
- webuploader实现批量图片上传功能
- webuploader上传文件后的回调处理,jquery插件webuploader上传成功后怎么获取文件数据-百度webuploader教程9
- JavaScript中使用webuploader实现上传视频功能(demo)
- ASP.NET MVC Webuploader实现上传功能
- 使用WebUploader上传文件,,简单的配置过程
- webuploader分片上传,jquery插件webuploader大文件分片上传-百度webuploader教程8
- 使用百度Web Uploader上传文件的简单用例
- WebUploader+SpringMVC实现文件上传功能
- 百度webuploader,一个简单易用的jqeury 上传文件插件
- .NET快速信息化系统开发框架 V3.2->Web版本新增“文件管理中心”集上传、下载、文件共享等一身,非常实用的功能
- 功能强大的文件上传插件带上传进度-WebUploader
- loner_li web版 简单的发送邮件功能实现(带上传附件)
- WebUploader+SpringMVC实现文件上传功能
- 使用WebUploader实现分片断点上传文件功能(二)
- webuploader+springmvc实现图片上传功能
- Vue2.0结合webuploader实现文件分片上传功能