Foxtable(狐表)用户栏目专家坐堂 → [分享]网页版图片上传以及查看


  共有2622人关注过本帖树形打印复制链接

主题:[分享]网页版图片上传以及查看

帅哥哟,离线,有人找我吗?
haotinghua
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:一尾狐 帖子:458 积分:3820 威望:0 精华:0 注册:2016/8/21 3:43:00
[分享]网页版图片上传以及查看  发帖心情 Post By:2017/5/26 18:04:00 [只看该作者]

前两天在各个版主的帮助下,利用帮助里面的案例进行了自己需求的实际修改,过程中也不断查阅论坛和调试,觉得可能是大家都遇到的一些比较共性的问题。这里分享一下,也算是感谢大家的帮助。
有些东西自己可能也没有吃透,不过目前算是可以有一个基本的了。
实现的功能:
1、图片压缩;图片名字更改;后台二进制保存到单元格内(便于调出展示)
2、图片展示
过程中自己遇到的问题:
1、图片上传中因为用了异步函数没吃透,所以用的3个页面来完成(自己也觉得繁琐,但是解决问题就好)
2、图片展示时调取时用相对路径还是绝对路径,感觉相对路径要方便些
以下代码:
Dim fl As String = "c:\web\" & e.path
If filesys.FileExists(fl)
    Dim idx As Integer = fl.LastIndexOf(".")
    Dim ext As String  = fl.SubString(idx)
    Select Case ext
        Case ".jpg",".gif",".png",".bmp",".wmf",".js",".css" ,".html",".htm",".zip",".rar"
            e.WriteFile(fl)
            Return '这里必须返回
    End Select
End If
Dim wb As New weui
Select Case e.Path
    Case "addnew.htm"
        wb.AddForm("","form1","receive.htm")
        With wb.AddInputGroup("form1","ipg1","XXX-货品登记")
            .AddInput("名称","名称","Text")
            .AddInput("库存","库存","number")
            .AddSelect("单位","单位","套|米|个|台|其它")
            .AddSelect("状态","状态","完好|轻微损坏|严重损坏|作废|其它")
            With wb.AddInputGroup("form1","ipg2","其它备注")
                .AddTextArea("备注",2).Placeholder = "......"  '备注做的两行内容留空
            End With
            With wb.AddInputGroup("form1","ipg3","图片上传")
                With .AddUploader("up128","照片",True)
                    .AllowDelete = True '允许删除
                    .Incremental = True '允许重复选择文件或连续拍照
                    .ScaleWidth = 600
                End With
            End With
        End With
        With wb.AddButtonGroup("form1","btg1",True)
            .Add("btn1", "确定", "button").Attribute= "" '调用js函数上传
            .Add("btn2", "返回列表","button","list.htm").Kind = 1
        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"
        Dim nms() As String = {"名称","库存","单位","状态","备注"}
        Dim dr As DataRow = DataTables("XXXX").AddNew() '后台增加行
        For Each nm As String In nms
            dr(nm) = e.PostValues(nm)
        Next
        Dim i As Integer = 1  '做编号,避免重名
        Dim t As String = Format(Date.now,"MMddHmmss") '为文件保存名字更改做准备
        For Each key As String In e.Files.Keys
            Dim lst As New List(of String)
            For Each fln As String In e.Files(key)
                e.SaveFile(key,fln, ProjectPath & "Attachments\"  & t & i & ".jpg")
                lst.Add(t & i & ".jpg")
                i = i + 1
            Next
            dr.Lines("照片") = lst   '将图片二进制存入单元格多行文本
        Next
        
        If dr.IsNull("名称") Then  '添加时设置没有品名时无法上传
            dr.Delete()  '如果无法上传,删除之前的增加行
        Else
            dr.save()
            e.WriteString("OK")      'JS里面设置了"OK"的调用
        End If
        '
        
    Case "upload.htm"
        With wb.AddMsgPage("","msgpage","增加成功", "欢迎使用") '生成成功提示页
            .AddButton("btn1","继续增加","addnew.htm")
            .AddButton("btn1","返回列表","list.htm").Kind = 1
        End With
        e.WriteString(wb.Build)
End Select
[此贴子已经被作者于2017/5/26 18:08:54编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
haotinghua
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:一尾狐 帖子:458 积分:3820 威望:0 精华:0 注册:2016/8/21 3:43:00
  发帖心情 Post By:2017/5/26 18:07:00 [只看该作者]

展示的话用的是函数,这个跟帮助没有多大改动,特别要注意的是尽量用相对路径。我是在服务器里面把发布后的程序放到的/web目录下

Dim e As RequestEventArgs = args(0)
Dim wb As New weui
Dim PageNumber As Integer = e.GetValues("page")
Dim PrimaryKey As Integer = e.GetValues("key")
Dim PageURL = "List.htm?page=" & PageNumber
If e.PostValues.Count = 0 Then 
    Dim dr As DataRow = DataTables("XXX").SQLFind("[_Identify]=" & PrimaryKey)
    If dr IsNot Nothing Then
        wb.AddForm("","form1","edit.htm?key=" & PrimaryKey &  "&page=" & PageNumber)    
        With wb.AddPreview("","pv1","货品名称",dr("名称"))
            .AddItem("库存",dr("库存")&dr("单位"))
            .AddItem("状态",dr("状态"))
            .AddItem("备注", dr("备注"))           
        End With
        With wb.AddInputGroup("form1","ipg1","货品图片")    
            With .AddUploader("up1","",True)
                .AllowAdd = False '关闭文件上传功能
                Dim lst As New List(of String)
                lst = dr.Lines("照片")
                For Each nm As String In lst
                   .AddImage("./库存登记/Project/Attachments/" & nm  )  '用相对路径
                Next
            End With
        End With
        With wb.AddButtonGroup("","btg6", False)
            .Add("btn1","返回上页","button",PageURL) '生成返回原来页面的按钮
            .Add("btn7", "主列表","button","list.htm")
            .Add("btn6", "添加货品","button","addnew.htm")
        End With
    End If
End If
e.WriteString(wb.Build) '生成网页




 回到顶部
帅哥哟,离线,有人找我吗?
haotinghua
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:一尾狐 帖子:458 积分:3820 威望:0 精华:0 注册:2016/8/21 3:43:00
  发帖心情 Post By:2017/5/26 18:13:00 [只看该作者]

图片展示页面会调用到后台单元格多行文本里面的lines,对集合不熟悉耗费了大量时间

            With .AddUploader("up1","",True)
                .AllowAdd = False '关闭文件上传功能
                Dim lst As New List(of String)
                lst = dr.Lines("照片")
                For Each nm As String In lst
                   .AddImage("./库存登记/Project/Attachments/" & nm  )  '用相对路径
                Next
            End With

 回到顶部
帅哥哟,离线,有人找我吗?
haotinghua
  4楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:一尾狐 帖子:458 积分:3820 威望:0 精华:0 注册:2016/8/21 3:43:00
  发帖心情 Post By:2017/5/26 18:26:00 [只看该作者]


图片点击可在新窗口打开查看此主题相关图片如下:图片5 拷贝.jpg
图片点击可在新窗口打开查看

[此贴子已经被作者于2017/5/26 18:35:29编辑过]

 回到顶部
帅哥哟,离线,有人找我吗?
bohe
  5楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:五尾狐 帖子:1074 积分:9872 威望:0 精华:0 注册:2008/9/2 11:34:00
  发帖心情 Post By:2017/5/26 20:08:00 [只看该作者]

吸收的不错,点个赞

 回到顶部
帅哥哟,离线,有人找我吗?
有点蓝
  6楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:超级版主 帖子:106680 积分:542589 威望:0 精华:9 注册:2015/6/24 9:21:00
  发帖心情 Post By:2017/5/26 20:31:00 [只看该作者]

多谢分享

 回到顶部
帅哥哟,离线,有人找我吗?
Liangcai
  7楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:小狐 帖子:300 积分:2541 威望:0 精华:0 注册:2011/9/24 13:30:00
  发帖心情 Post By:2018/11/17 14:25:00 [只看该作者]

学习

 回到顶部