filecabinet - 源码 - 源码 - 免费下载

filecabinet

文件大小： unknow

源码售价： 5 个金币积分规则积分充值

资源说明：Better way to do file uploads in HTML with a little help from Javascript.

# Better way to do file uploads in HTML

Take some of pain out of input[type=file] HTML tag

###Problem:
Webkit based browsers have a nice way to render the <input type="file" /> HTML tag in that it doesn't the full directory of the file you are uploading — only the file name itself. Displaying the entire directory path is an annoyance as it doesn't give you immediate feedback that you've selected the correct file name. So you have to grab the mouse and select inside the field and scroll all the way over to the right.

###Solution:
There have been a decent number of solutions for making the input[type=file] nicer. I liked Shaun Inman's approach best; however, it was more about button styling and I wanted that plus filename only,remove, and add another link. Hence the FileCabinet class ( Prototype.js based ).

Fig. 3 FileCabinet rendering of  <input type="file" /> **Better, much better**

![Filecabinet rendering of file upload HTML tag](/images/filecabinet.png)

###HTML and CSS prerequisites.

Required HTML. You need to have a bit of HTML that defines the "add an attachment" action. For example.


<span id="addAttachment"></span>



Required CSS.



      input.uploadFields {
        height:100%;
        opacity: 0;
        position: relative;
        width:auto;
        -moz-opacity: 0;
        filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
      }

      span.fileCabinet{
        width: 79px;
        height: 22px;
        background: url(btn-choose-file.gif) 0 0 no-repeat;
        display: block;
        overflow: hidden;
        cursor: pointer;
      }



###Usage:


    <script>
      document.observe( 'dom:loaded',function(){
        new FileCabinet('addAttachment');
      });
    </script>



####Options:
There are two options:

**tableWidth:**

  new FileCabinet('addAttachment',{ tableWidth: 40 });
  Default is 100% e.g. Defines in percentage the width of the table row each new row.

**newElClassName:**

  new FileCabinet('addAttachment',{ newElClassName: 'fileCabRow' });
  Default is "row" e.g. Defines the class name for each new row. You may want something more descriptive if the class name of "row" is too generic and conflicts with other CSS rules.

### Final Notes:
- Demo is here.
- Code is here.
- Tested in IE 6+,Firefox 3,Chrome 4,Safari 4

部分文件列表（点击文件名可查看文件内容）

					
									本源码包内暂不包含可直接显示的源代码文件，请下载源码包。