<!doctype html>
|
<html>
|
<head>
|
<meta charset="utf-8"/>
|
<title>处理上传后路径的示例</title>
|
<link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
|
<link rel="stylesheet" type="text/css" href="../../assets/demo.css"/>
|
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js" charset="utf-8"></script>
|
</head>
|
<body>
|
<article id="doc">
|
<h4>处理上传后路径的示例</h4>
|
<p>这个demo将演示，如何处理上传后路径。</p>
|
<p>uploader有个UrlsInput的子类，专门用于处理路径隐藏域，你可以通过调用UrlsInput的方法和属性，来处理路径。</p>
|
<p>点击下来的按钮，上传几个文件。</p>
|
<!-- 上传按钮，组件配置请写在data-config内 -->
|
<a id="J_UploaderBtn" class="g-u uploader-button uploader-button-focus" data-config=
|
'{"type" : "auto",
|
"serverConfig":{"action":"upload.php","data":{"dir":"files/"},"dataType" : "json"},
|
"name":"Filedata",
|
"urlsInputName":"fileUrls"}'
|
href="#">
|
选择要上传的文件
|
</a>
|
<!-- 路径urls -->
|
<input type="hidden" value="" name="fileUrls" />
|
<!-- 文件上传队列 -->
|
<ul id="J_UploaderQueue">
|
|
</ul>
|
<div class="btn-wrapper">
|
<input type="button" value="获取文件路径" id="J_GetUrls">
|
</div>
|
<h5>在页面中增加一个存储路径的隐藏域</h5>
|
<pre class='brush: xml'>
|
<!-- 路径urls -->
|
<input type="hidden" value="" name="fileUrls" />
|
</pre>
|
<p>留意隐藏域的name必须和你组件初始化配置一致，比如对应的配置"urlsInputName":"fileUrls"。</p>
|
<p>组件初始化时会进行个判断，当存在指定name名的元素时，不再向页面插入一个隐藏域。</p>
|
<p>当文件上传成功后，组件会自动将文件路径写入到隐藏域。</p>
|
<p>组件的配置如下</p>
|
<pre class='brush: xml; highlight: [4]'>
|
<a id="J_UploaderBtn" class="g-u uploader-button uploader-button-focus" data-config=
|
'{"type" : "auto",
|
"serverConfig":{"action":"upload.php","data":{"dir":"files/"},"dataType" : "json"},
|
"name":"Filedata",
|
"urlsInputName":"fileUrls"}'
|
href="#">
|
选择要上传的文件
|
</a>
|
</pre>
|
<h5>如何手动获取文件路径</h5>
|
<pre class='brush: js; highlight: [8, 11]'>
|
var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
|
//对组件的后续操作务必放在init事件内，因为组件时可能需要异步加载模板
|
ru.on("init",function(ev){
|
var $ = S.Node.all,
|
//上传组件实例
|
uploader = ev.uploader,
|
//UrlsInput的实例
|
urlsInput = uploader.get('urlsInput');
|
$('#J_GetUrls').on('click',function(){
|
//为一个数组
|
var urls = urlsInput.get('urls');
|
alert('所有的url是：' + urls + ',url个数为：'+urls.length);
|
})
|
})
|
</pre>
|
<p>Uploader有个urlsInput的属性存储着UrlsInput的实例，而UrlsInput有个urls（数组）的关键属性，可以得到文件路径。 </p>
|
<p>UrlsInput有二个关键方法:add()和remove()，用于添加和删除文件路径，一般无需调用。</p>
|
</article>
|
<script>
|
var S = KISSY,
|
//包路径，实际使用请直接配置为"http://a.tbcdn.cn/s/kissy/"
|
path = S.Config.debug && "../../../../../../" || "http://a.tbcdn.cn/s/kissy/";
|
S.config({
|
packages:[ {
|
name:"gallery",
|
path:path,
|
charset:"utf-8"
|
} ]
|
});
|
//加载上传组件入口文件
|
KISSY.use('gallery/form/1.3/uploader/index', function (S, RenderUploader) {
|
//第一个参数：按钮元素钩子，第二个参数：队列元素钩子
|
var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
|
//对组件的后续操作务必放在init事件内，因为组件时可能需要异步加载模板
|
ru.on("init",function(ev){
|
var $ = S.Node.all,
|
//上传组件实例
|
uploader = ev.uploader,
|
//UrlsInput的实例
|
urlsInput = uploader.get('urlsInput');
|
$('#J_GetUrls').on('click',function(){
|
//为一个数组
|
var urls = urlsInput.get('urls');
|
alert('所有的url是：' + urls + ',url个数为：'+urls.length);
|
})
|
})
|
})
|
</script>
|
|
<!-- 代码高亮 START -->
|
<link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
|
<script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
|
<script type="text/javascript">SyntaxHighlighter.all();</script>
|
<!-- 代码高亮 END -->
|
</body>
|
</html>
|
