图片旋转上传
手机可以横着拍照,也可以竖着拍照,但通过手机拍照上传的时候,Uploader并不知道这个照片的拍摄方向。
典型的问题是,在iPhone中竖着拍照上传,Uploader会横过来显示照片,服务端接收到的照片也是横过来的。
为解决这个问题,我们为Uploader增加了一个整数型属性Rotate,用于设置图片的旋转角度,可选值有:
1 | 顺时钟旋转90° |
2 | 顺时钟旋转180° |
3 | 顺时钟旋转270° |
通常在iPhone上竖方向拍照上传的时候,需要将Rotate属性设置为1。
要实现图片的旋转上传,单单设置Rotate属性是不够的,我们还需要将Uploader的Incremental属性设置为True,所以和上一节一样,我们只能用submitAjaxForm函数提交表单,不过代码依旧很简单。
一个例子
希望图片顺时钟旋转90°上传,并将宽度压缩为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);
}
}
2、的HttpRequest事件代码如下,和上一节相比,只是增加了一行代码(加粗显示的这行)而已:
Select
Case e.Path
Case "addnew.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个像素,高度等比例压缩
.Rotate =
1 '顺时钟旋转90°
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