上传照片实现记录(2)——选择照片对话框

来源:互联网 发布:台山学美工要多少钱 编辑:程序博客网 时间:2024/06/04 18:52

       在上边记录当中,记录了实现周围透明灰色,中间可以操作的对话框效果。总一点点的差别中寻找成功。

      这会就来记录一下选择照片框的实现问题。其实实现不是问题,想要让程序呈现自己想要的样子就费了点劲。

       先说一下最容易实现的方法,使用FileUpload空间。这是一个非常好用的控件。不过不太适合我想要的样子不太合适。我想要的到的效果如下图所示:              

         如图所示,是要通过按钮的样子来实现上传照片,并且要通过每一个按钮来判断被点击的按钮是哪一行的。而FileUpload在按钮的前面还有一个文本框,这样的样子好像不太适合在这样的表格中出现。

         也想了一些办法来实现修改FileUpload控件的样式,但是貌似在网上没有找到,人家说可以通过CSS来控制不让前面的文本框不出现,但是也没有找到具体的实现方法。网上也说道,那个按钮上的“浏览”两个字是改不掉的。所以也就没有往下再找。既然使用FileUpload不容易实现,那肯定会有其他的办法实现这种功能。

         所以又从网上开始搜寻终于找到了,还是用FileUpload控件。从实现的思想上就发生了转变。这次基本实现方法是使用一个FileUpload控件,将其设置为不显示,而实际页面样式设计和上图基本相同。单机按钮时激发FileUpload的“onchange”方法。就可以实现想要的样式了。但任然存在着问题。那我们怎么才能通过判断按钮所在的行通过FileUpload控件的选择文件之后还能保证行号是如何保存下来的。这下可解决不了了,不得不放弃了这种实现方法,又从网上寻找其他的实现方案。

        于是乎,我又发现了一种其他的实现方法:

               

    //定义ActiveXObject对象     var fd = new ActiveXObject("MSComDlg.CommonDialog");      //设置打开完文件的限制格式     fd.Filter = "图像文件 (*.jpg;*.jpeg;*.gif)|*.jpg;*.jpeg;*.gif";    fd.FilterIndex = 2;    // 必须设置MaxFileSize. 否则出错    fd.MaxFileSize = 128;    fd.showOpen();

 

      这下可好了,又控制了文件类型,又获得了表格的行数!

原创粉丝点击