上传照片实现记录（2）——选择照片对话框

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

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

       先说一下最容易实现的方法，使用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();

 

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