[JS][前端]修改檔案input為button樣式
問題描述
在開發的時候,遇到了需要提交表單檔案的需求,但是原生<input>
標籤特別不好看,而且還有點選提交檔案的提示,這樣很影響美觀,於是便想著更改<input>
為<button>
按鈕。
解決方案
- 建立一個button按鈕,在其上面覆蓋表單框,且設定表單的透明度為0,這樣雖然使用者看到的是button,但是點選的確實
- 將隱藏,當點選button的時候,去觸發的點選,使用者點選的是button,但是觸發的是input的事件。
實現方案
- 設定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,在網站攻擊的時候也可能會用到這種方法,當用戶誤以為點選了底層的元素,但是實際上點選的頂層看不見的元素,導致洩密。
- 設定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][前端]修改檔案input為button樣式
問題描述 在開發的時候,遇到了需要提交表單檔案的需求,但是原生<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中,為了其他學習者和開發者提供拙見。 由於程式碼中我的註釋很詳盡,所以具體邏輯實現及不介紹
input為file上傳檔案
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