1. 程式人生 > >[JS][前端]修改檔案input為button樣式

[JS][前端]修改檔案input為button樣式

問題描述

在開發的時候,遇到了需要提交表單檔案的需求,但是原生<input>標籤特別不好看,而且還有點選提交檔案的提示,這樣很影響美觀,於是便想著更改<input><button>按鈕。

解決方案

  1. 建立一個button按鈕,在其上面覆蓋表單框,且設定表單的透明度為0,這樣雖然使用者看到的是button,但是點選的確實
  2. 將隱藏,當點選button的時候,去觸發的點選,使用者點選的是button,但是觸發的是input的事件。

實現方案

  1. 設定input透明度為0的方法
<input class="file" accept="image/*"
name="file" type="file"> <input class="btn" id="submit" value="點選拍照上傳" type="button">

對應的css樣式

.file {
    width: 150px;
    height: 50px;
    position: absolute;
    top: 50px;
    left: 30%;
    z-index: 1;
    opacity: 0;
}
.btn {
    width: 150px;
    height: 50px;
    font-size: 16px;
    color
: #fff
; background: #28abde; border-radius: 5px; position: absolute; top: 50px; left: 30%; }

這種方法是加了一層看不見的input,使用者看到的是button,但是點選的卻是input,在網站攻擊的時候也可能會用到這種方法,當用戶誤以為點選了底層的元素,但是實際上點選的頂層看不見的元素,導致洩密。

  1. 設定input不可見,並由button去觸發。
<form name="form1">
 <input type="file" name="picpath"
id="picpath" style="display:none;" onChange="document.form1.path.value=this.value">  <input type="button" value="上傳檔案" onclick="document.form1.picpath.click()"> </form>

當用戶點選button按鈕的時候會觸發click事件,當檔案域的值改變時同時修改對應表單內的值。

相關推薦

[JS][前端]修改檔案inputbutton樣式

問題描述 在開發的時候,遇到了需要提交表單檔案的需求,但是原生<input>標籤特別不好看,而且還有點選提交檔案的提示,這樣很影響美觀,於是便想著更改<input>為<button>按鈕。 解決方案 建

Visual Studio 2017 修改 檔案 編碼 UTF-8

VS 2017隱藏了高階儲存功能,導致沒辦法直接去設定程式碼編碼 UTF-8 那麼我們直接把高階儲存功能調用出來即可: 單擊“工具”|“自定義”命令,彈出“自定義”對話方塊。 單擊“命令”標籤,進入“命令”選項卡。 在“選單欄”下拉列表中,選擇“檔案”選項。 單擊“新增命令”按鈕,

關於前端滾動條,input框等樣式修改

textarea 方塊 fff ont col border pos 前端 scroll 1.改變滾動條的樣式 .orderList::-webkit-scrollbar {/*滾動條整體樣式*/ width: 4px; /*高寬分別對應橫豎滾動條的尺寸*/ h

檔案上傳input file預設樣式修改

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>檔案上傳按鈕修改樣式</title> <style> .file-box{ display:

前端-工程打包時,js, css等檔案

  前端-工程打包時,為js, css等檔案的檔名做hash處理,以處理客戶端瀏覽器快取舊程式碼的情況,當有新版本的程式碼時客戶端可能會有這樣的不確定性的問題 對於angular的工程可以這樣打包:ng build -prod --output-hashing=all But

去除input標籤/button按鈕原本樣式 並利用js賦值,select 中Option的增加與刪除

-----------input--------- <input   id="show" type="text" style="border-left: 0; border-right: 0;

ASP.NET 如何在.cs檔案前端新增JS程式碼

方法一 (head 必須新增runat=”server”) script = new HtmlGenericControl("script"); script.Attributes.Add("

ajaxfileupload單檔案上傳相容IE8及 input type=file樣式修改

ajaxfileupload單檔案上傳相容IE81、引用jquery和ajaxfileupload.js<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></scrip

使用前端構建工具批量頁面中引用的js檔案新增版本號的歷程

近日遇到有客戶反應,頁面開啟顯示不正常,不能完全的顯示出頁面。細問之下才得知,原來是有一個js檔案修改了一個方法,但是上線後由於瀏覽器快取的原因,還是載入的舊js檔案,導致頁面顯示不正常了。給客戶解釋由於系統更新,需要強制重新整理才可以。這天陸續又有客戶反映遇到此問題,而有

前端優化之動畫什麽要盡量用css3代替js

視覺 空間 好處 畫的 動畫效果 沒有 不可見 我們 瀏覽器 導致JavaScript效率低的兩大原因:操作DOM和使用頁面動畫。通常我們會通過頻繁的操作 DOM的CSS來實現視覺上的動畫效果,導致js效率低的兩個因素都包括在內了在頻繁的操作DOM和CSS時,瀏覽器會不停的

input標簽樣式修改

line input log put 添加 顯示 ott name pan input標簽: 1 <form action="xxx" method="post"> 2 User: <input type="text" name="User" /&g

阿里雲oss js前端獲取簽名直傳檔案

1. 原來的官方文件是先選擇檔案,再點選上傳按鈕,上傳檔案,我這裡是選擇完檔案,就上傳,這裡主要是在FilesAdded這個裡面新增完檔案,立刻初始化一次set_upload_param(uploader, '', true); 就能選擇完就上傳了. 2.這個只是個簡單的圖片上傳,沒有

jquery判斷 input type="file"上傳檔案是否

要想獲取type="file"的input內容,用var file = $("id").val();肯定是不行的,下面是程式碼: html上傳按鈕為: <input type="file" id="reportXML" name="reportXML"

C#:讀取html模板檔案,並替換修改檔案中指定值,儲存修改後的檔案

1.準備html模板檔案:Pages/Device/DeviceModel8.html   2 using System.IO:讀取檔案內容,並替換指定內容                  &nbs

React 專案中修改 Ant Design 的預設樣式(Input Checkbox 等等

修改樣式更符合專案的需求特別是在 Input 和 Checkbox 等等一系列 試過很的方式都有問題, 比如直接在行內新增樣式會無法傳遞到特定的層級 最好的辦法是新增 id 可行 渲染部分程式碼 <Card title = "修改預設樣式">

中高階前端應該必會,js實現事件委託代理、切換樣式、元素獲取相對於文件位置等

1、介紹   隨著元件開發大流行,現在三大框架已經基本佔領了整個前端。   這時候,我們要是引入一個 jq 是不是先得你的專案非常臃腫,jq 也很不適合。   這個時候,你就需要來增加你 js 的功底。 2、各種操作   1、事件委託   案例分析: <ul id= "list

前端 js 匯出csv檔案(使用a標籤)

前言 匯出檔案,使用最多的方式還是伺服器端來處理。比如jsp 中使用response 的方式。 但是,有時候可能就想使用web 前端是否也可以把頁面上的內容匯出來呢? 比如說,匯出頁面的一個表格。 這個需求肯定是有答案的,只是對於各瀏覽器處理會稍微不一樣。(主要是IE 和其他

前端頁面檔案拖拽上傳模組html/css/js程式碼示例

最近給衛生局做一個表格上傳/視覺化系統,算是小有成果。今天把專案中的檔案拖拽上傳模組分離出來,做了一個獨立的小demo,並把相關程式碼打包上傳到了我的github中,為了其他學習者和開發者提供拙見。 由於程式碼中我的註釋很詳盡,所以具體邏輯實現及不介紹

inputfile上傳檔案

1、去除input型別為file上傳檔案時預設樣式和預設”選擇檔案”等; 2、壓縮要上傳的圖片 3、隱藏上傳按鈕, 手動觸發 實現思路 隱藏選擇圖片的input, 點選顯示圖片觸發input

JS:將只讀檔案可寫檔案

 親測必須將程式碼放在記事本中,改成html格式,在用IE執行(必須) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d