增强Uploader
从本节开始,我们利用前面介绍的AJAX函数,来扩展一下Uploader组件的功能。
Uploader在默认情况下:
1、再次选择上传文件,会覆盖上次选择好的文件。
2、如果开启了图片删除功能,删除其中一个选择好的图片,那么所有已经选择好的图片都会被删除,需要全部重选。
多数时候,这关系不大,但是如果你需要连续拍摄多张照片上传,是没有办法的,因为每拍摄一张照片,就会覆盖之前拍摄好的照片,当然你也可以事先用手机自带的相机拍摄好多张照片,然后用Uploader选择上传,
不过多少有点不方便。
如果我们将Uploader的Incremental属性设置为True,可以实现:
1、再次选择上传文件,不会覆盖之前上传的文件。
2、如果开启了图片删除功能,可以逐个删除选择好的图片。
但是,在这种情况下,表单默认的提交功能,将不会上传选择好的文件,我们只能用submitAjaxForm函数提交表单,不过代码依旧很简单。
一个例子
设计一个下图所示的图片上传窗口,要求:
1、可以如前所述,能重复选择文件,或连续拍摄照片。
2、能删除单个的图片,而不影响其他图片。
3、能在上传过程中,显示"正在上传"。
设计过程:
1、在"d:\web"目录下,建立一个子目录lib,在这个目录建立一个文本文件,文件名为"ajaxform.js",文件内容为:
function submitForm(){
show("tst1",2000);
var result = submitAjaxForm('form1','afterSubmit');
}
function afterSubmit(result){
hide("tst1");
if (result=='OK') {
show("tst2");
location="upload.htm";
}
else{
show("tst3",2000);
}
}
提示: 这里的submitAjaxForm是通过异步方式运行的,用回调函数接收服务器返回的结果,因为如果用同步方式运行,将无法显示“正在上传”的提示。
2、HttpRequest事件代码:
Select
Case e.Path
Case "upload.htm"
Dim
wb As New
weui
wb.AddForm("","form1","receive.htm")
With wb.AddInputGroup("form1","ipg1","文件上传")
With .AddUploader("up128","照片",True)
.AllowDelete =
True '允许删除
.Incremental =
True '允许
重复选择文件或连续拍照
End With
End
With
With
wb.AddButtonGroup("form1","btg1",True)
.Add("btn1",
"确定",
"button").Attribute=
"onclick='submitForm()'"
'调用js函数上传
End
With
wb.AddToast("","tst1",
"正在上传",1)
wb.AddToast("","tst2",
"上传成功",0)
wb.AddToast("","tst3",
"上传失败",0).Icon=
"warn"
wb.AppendHTML("<script
src='./lib/ajaxform.js'></script>") '引入脚本文件
e.WriteString(wb.Build)
'生成网页
Case "receive.htm"
For
Each key As
String In
e.Files.Keys
For
Each fln
As String
In e.Files(key)
e.SaveFile(key,fln,"d:\web\uploadfiles\"
& fln)
'保存接收到的文件
Next
Next
e.WriteString("OK")
End
Select