增强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