<!doctype html>
|
<html>
|
<head>
|
<meta charset="utf-8"/>
|
<title>只使用flash上传的demo</title>
|
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js" charset="utf-8"></script>
|
</head>
|
<body>
|
<h2>只使用flash上传的demo</h2>
|
<div class="grid">
|
|
<input class="g-u" id="J_UploaderBtn" name="Filedata" type="image-uploader" value="上传图片"
|
action="upload.php" urlsInputName="imageUrls" max="3" maxSize="500">
|
|
<!--用来存放服务器端返回的图片路径，多个图片以逗号隔开-->
|
<input type="hidden" name="imageUrls">
|
</div>
|
<ul id="J_UploaderQueue" class="grid">
|
|
</ul>
|
<div class="btn-wrapper">
|
<input value="1" type="checkbox" class="J_Field" id="J_AutoUpload" checked> <label>自动上传</label>
|
<input value="1" type="checkbox" class="J_Field" id="J_Multiple" checked> <label>多选上传</label>
|
<input value="1" type="checkbox" class="J_Field" id="J_UploadDisabled"> <label>禁用上传按钮</label>
|
<input value="1" type="checkbox" class="J_Field" id="J_FileFilters"> <label>只允许上传png图片</label>
|
</div>
|
<p>flash上传在chrome和firefox下可能存在session丢失的问题，建议在基于webkit的浏览器下使用ajax上传</p>
|
<h2>测试ImageUploader和Uploader的共存问题</h2>
|
<a id="J_UploaderBtn2" class="uploader-button" href="#"> 选择要上传的文件 </a>
|
<!-- 文件上传队列 -->
|
<ul id="J_UploaderQueue2">
|
|
</ul>
|
<script>
|
var S = KISSY;
|
//包路径，实际使用请直接配置为"http://a.tbcdn.cn/s/kissy/"
|
var 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/imageUploader', function (S, ImageUploader) {
|
var flashUploader = new ImageUploader('#J_UploaderBtn', '#J_UploaderQueue',{
|
// 上传方式切成flash
|
type : "flash",
|
//手动控制flash的尺寸
|
swfSize:{"width":200,"height":25}
|
});
|
flashUploader.on('render', function (ev) {
|
var $ = S.Node.all;
|
var Event = S.Event;
|
//上传组件实例
|
var uploader = ev.uploader;
|
//上传按钮实例
|
var button = uploader.get('button');
|
|
//flash准备完毕需要一定的时间，所以想对flash进行操作最好监听render事件
|
button.on('render', function () {
|
//触发多选框的change事件，改变组件配置
|
Event.fire('.J_Field', 'change');
|
});
|
|
$('#J_AutoUpload').on('change', function (ev) {
|
var checked = $(ev.target).prop('checked');
|
uploader.set('autoUpload', checked);
|
});
|
$('#J_UploadDisabled').on('change', function (ev) {
|
var checked = $(ev.target).prop('checked');
|
button.set('disabled', checked);
|
});
|
$('#J_Multiple').on('change', function (ev) {
|
var checked = $(ev.target).prop('checked');
|
button.set('multiple', checked);
|
});
|
$('#J_FileFilters').on('change', function (ev) {
|
var checked = $(ev.target).prop('checked');
|
if (checked) {
|
uploader.set('allowExts','png');
|
} else {
|
uploader.set('allowExts','jpg,jpeg,png,gif,bmp');
|
|
}
|
});
|
});
|
flashUploader.render();
|
});
|
|
KISSY.use('gallery/form/1.3/uploader/index', function (S, RenderUploader) {
|
new RenderUploader('#J_UploaderBtn2', '#J_UploaderQueue2',{
|
type:'flash',
|
//服务器端配置
|
serverConfig:{
|
//处理上传的服务器端脚本路径
|
action:"upload.php"
|
},
|
// 文件域
|
name:"Filedata",
|
//用于放服务器端返回的url的隐藏域
|
urlsInputName:"fileUrls"
|
});
|
})
|
</script>
|
</body>
|
</html>
|
