上传文件

仿网易界面
博客分类：
fileUpload
Safari JavaScript HTML
Html代码
<html>

<head>

<title>Add Files</title>

<style>

a.addfile {

background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);

background-repeat:no-repeat;

background-position:-823px -17px;

display:block;

float:left;

height:20px;

margin-top:-1px;

position:relative;

text-decoration:none;

top:0pt;

width:80px;

}



input.addfile {

/left:-18px;/

}



input.addfile {

cursor:pointer !important;

height:18px;

left:-13px;

filter:alpha(opacity=0);

position:absolute;

top:5px;

width:1px;

z-index: -1;

}

</style>



<script type="text/javascript">



function MultiSelector(list_target, max)

{

    // Where to write the list

    this.list_target = list_target;

    // How many elements?

    this.count = 0;

    // How many elements?

    this.id = 0;

    // Is there a maximum?

    if (max)

     {

        this.max = max;

     }

    else

     {

        this.max = -1;

     };



    /**

      * Add a new file input element

      */

    this.addElement = function(element)

     {

        // Make sure it's a file input element

        if (element.tagName == 'INPUT' && element.type == 'file')

         {

            // Element name -- what number am I?

             element.name = 'file_' + this.id++;



            // Add reference to this object

             element.multi_selector = this;



            // What to do when a file is selected

             element.onchange = function()

             {

                // New file input

                var new_element = document.createElement('input');

                 new_element.type = 'file';

                 new_element.size = 1;

                 new_element.className = "addfile";



                // Add new element

                this.parentNode.insertBefore(new_element, this);



                // Apply 'update' to element

                this.multi_selector.addElement(new_element);



                // Update list

                this.multi_selector.addListRow(this);



                // Hide this: we can't use display:none because Safari doesn't like it

                this.style.position = 'absolute';

                this.style.left = '-1000px';

             };





            // If we've reached maximum number, disable input element

            if (this.max != -1 && this.count >= this.max)

             {

                 element.disabled = true;

             };



            // File element counter

            this.count++;

            // Most recent element

            this.current_element = element;

         }

        else

         {

            // This can only be applied to file input elements!

             alert('Error: not a file input element');

         };

     };





    /**

      * Add a new row to the list of files

      */

    this.addListRow = function(element)

     {

        // Row div

        var new_row = document.createElement('div');



        // Delete button

        var new_row_button = document.createElement('input');

         new_row_button.type = 'button';

         new_row_button.value = 'Delete';



        // References

         new_row.element = element;



        // Delete function

         new_row_button.onclick = function()

         {

            // Remove element from form

            this.parentNode.element.parentNode.removeChild(this.parentNode.element);



            // Remove this row from the list

            this.parentNode.parentNode.removeChild(this.parentNode);



            // Decrement counter

            this.parentNode.element.multi_selector.count--;



            // Re-enable input element (if it's disabled)

            this.parentNode.element.multi_selector.current_element.disabled = false;



            // Appease Safari

            // without it Safari wants to reload the browser window

            // which nixes your already queued uploads

            return false;

         };



        // Set row value

         new_row.innerHTML = element.value + " ";



        // Add button

         new_row.appendChild(new_row_button);



        // Add it to the list

        this.list_target.appendChild(new_row);

     };

};

</script>

</head>



<body>





<form enctype="multipart/form-data" action="http://127.0.0.1:8080/xxx/fileUploadAction.action" method="post">



<a href="javascript:void(1==1);" class="addfile" style="cursor: default;" hidefocus="true">

<input id="my_file_element" class="addfile" type="file" name="file_1" size="1" title="点击选择附件">

</a>

<input type="submit" value="上传">

</form>



Files:



<div id="files_list" style="padding:5px;border:1px;border-style:solid;border-color:#0000ff;height:100px;width:600px;"></div>

<script>



var multi_selector = new MultiSelector(document.getElementById('files_list'), 100);



multi_selector.addElement(document.getElementById('my_file_element'));

</script>



</body>

</html>

美化上传控件的办法；

2007-04-27 16:39 by 迷路中的路人甲, 364 阅读, 0 评论, 收藏, 编辑

还有一个问题就是，如何利用这一个控件，进行多个文档的上传工作？
利用dom操作，当每次选择了一个文件的时候，隐藏该file域，在相同位置创建一个新的供下次点击，删除的时候只要直接删掉隐藏的就行了[初步想法未经证实]
一直以来上传控件input file都无法进行美化，例如换个图片什么的；查了很多资料最终就是需要利用隐藏file域实现上传功能；其实很简单，从163里面找了一个样式出来，搞定；

js代码： //依赖prototype.js

function selfile()
{
$("fileurl").value = $("file").value;
}

css代码：//来自mail.163.com

a.addfile{width:70px;height:20px;position:relative;cursor:hand;top:4px;top/**/:0;text-decoration:none;background-position:-823px -17px;display:inline;float:left;margin-top:-5px;margin-top/**/:-1px}
*:lang(zh) a.addfile{margin-top:-2px;cursor:pointer}
a.addfile:hover{background-position:-911px -17px;text-decoration:none}
input.addfile{width:1px;height:18px;cursor:pointer!important;cursor:hand;position:absolute;top:5px;left:-5px;left/**/:-3px;opacity:0;filter:alpha(opacity=0)}
*:lang(zh) input.addfile{left:-18px}

html代码：//

<input type="text" value="" id="fileurl" name="fileurl" readonly/>
<a href="#" class="addfile"> <input type="file" name="file" id="file" hideFocus class="addfile" onChange="selfile();"/>+添加附件(也可以放个美化的图片) </a>

posted on 2012-07-19 11:06 ** 阅读(162) 评论(0) 编辑收藏

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理

Hopes

上传文件

仿网易界面

导航

统计

公告

常用链接

留言簿(2)

随笔档案

文章分类

文章档案

新闻档案

相册

收藏夹

C#学习

友情链接

搜索

最新评论

阅读排行榜

评论排行榜