亚洲精品自在在线观看,亚洲AV本道一区二区三区四区,亚洲AV无码成人网站在线观看

上傳文件

仿網易界面
博客分類：
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 ** 閱讀(166) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

Hopes

上傳文件

仿網易界面

導航

統計

公告

常用鏈接

留言簿(2)

隨筆檔案

文章分類

文章檔案

新聞檔案

相冊

收藏夾

C#學習

友情鏈接

搜索

最新評論

閱讀排行榜

評論排行榜