input 原生上傳文件（type = file）

時間 2019-11-26

標籤 input 原生上傳文件 type file 简体版

原文原文鏈接

1.表單上傳文件的步驟：

- 1）設置enctype

默認爲：enctype="application/x-www-form-urlencoded"（通常不設置）

若要表單中有須要上傳文件的表單項時，則必須設置enctype：enctype="multipart/form-data"

- 2）設置method：提交方式

默認：get
須要上傳文件時，必須設置爲post

由於get方式攜帶的信息量過小，並且傳輸的數據都會顯示在地址欄，對於圖片等文件沒法處理javascript

2.上傳文件

一次只能選擇一個文件上傳

僞代碼css

<form action="UploadOneServlet" method="post" name="f_upload" enctype="multipart/form-data">
    <input type="text" name="username" /><br>
    <input type="file" name="filename" /><br>
    <input type="submit" value="上傳" />
</form>

運行結果html

此時咱們能夠看到一次只能選擇一個文件，進行上傳。java

一次能同時選中多個文件同時上傳

不少時候咱們須要同時選擇多個文件實現多個文件的上傳，那麼只選擇一個文件的狀況就不適用，如何設置呢？markdown

在input中設置屬性multiple便可 - - multiple=」multiple」app

僞代碼post

<form action="UploadOneServlet" method="post" name="f_upload" enctype="multipart/form-data">
    <input type="text" name="username" /><br>
    <input type="file" name="filename" multiple="multiple" /><br>
    <input type="submit" value="上傳" />
</form>

運行結果url

此時咱們能夠看到一次能夠選擇多個文件，進行上傳。spa

css input[type=file] 樣式美化(input上傳文件樣式 )

效果：.net

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
    <style>
        /*樣式1*/
        .a-upload {
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1
        }
        
        .a-upload  input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }
        
        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }
        /*樣式2*/
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>
</head>
<body style="padding: 10px">
<a href="javascript:;" class="a-upload">
    <input type="file" name="" id="">點擊這裏上傳文件
</a>
<a href="javascript:;" class="file">選擇文件
    <input type="file" name="" id="">
</a>
</body>
</html>