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

 


本页地址:http://www.foxtable.com/mobilehelp/topics/0106.htm