图片压缩上传

如今手机拍照的分辨率非常高,多数都是千万级别的像素,照片文件动辄好几M。

有时我们并不需要这么高的分辨率,这种高分辨率的照片不仅耽误了上传时间,也增加了服务器的处理负担。

UpLoader提供了两个属性,用于对要上传的照片进行自动压缩处理,这两个属性分别为:

如果压缩后图片的长宽比例要厚原图保持一致,那么ScaleWidth和ScaleHeight只能设置一个,另一个由系统按原图长宽比例自动计算得出。

要实现图片的压缩上传,单单设置ScaleWidth或ScaleHeight是不够的,我们还需要将Uploader的Incremental属性设置为True,所以和上一节一样,我们只能用submitAjaxForm函数提交表单,不过代码依旧很简单。

一个例子

设计一个下图所示的图片上传窗口,和上一节相比,新增第4点的要求:

1、能重复选择文件,或连续拍摄照片。
2、能删除单个的图片,而不影响其他图片。
3、能在上传过程中,显示"正在上传"。
4、所有图片在上传前,宽度统一压缩到400个像素,高度则按比例压缩。

设计过程:

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
'
允许重复选择文件或连续拍照
               
.ScaleWidth = 400 '自动压缩图片宽度为400个像素,高度等比例压缩
           
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/0251.htm