給<input type="file">增加樣式
參考:
1. http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
2. http://pan.baidu.com/s/1F9Uqy
3. http://stackoverflow.com/questions/4909228/style-input-type-file
這篇文章用的是bootstrap。我用的是semantic-ui也差不多
1.搞個button出來
<span class="ui fluid button btn-file">
<span id="buttonLabel">選擇圖片</span> <input type="file" name="img">
</span>
2. 搞個CSS
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
3. 搞個JS
$(document).on('change', '.btn-file :file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
4. JS要這麼用
$(document).ready( function() {
$('.btn-file :file').on('fileselect', function(event, numFiles, label) {
console.log(numFiles);
console.log(label);
$("#buttonLabel").text(label);
});
});
相關文章
- input type="file"使用
- input[type="radio"]自定義樣式
- <input type="file"> 限制檔案型別型別
- <input type="file"> 選中多個檔案
- 使用Input type=file 原生上傳使用總結
- input[type=file]不能選擇同一張圖片
- input[type=file] 獲取上傳檔案的內容
- 修改input標籤type=file型別按鈕的值型別
- vue3中清空input type="file"上傳檔案Vue
- react input[type='number']React
- CSS input 文字框樣式CSS
- CSS input文字框樣式CSS
- No input file specified.
- JQuery獲取input type=jQuery
- File type 屬性
- Jquery使用[Input type="checkbox&jQuery
- 【JavaScript】拖拽圖片檔案顯示縮圖 + div點選模擬 input[type=file]JavaScript
- HTML input file 檔案域HTML
- HTML input file檔案域HTML
- input file圖片上傳
- JavaScript 根據type篩選inputJavaScript
- input file相容性問題
- 頁面報錯 No input file specified
- jQuery匹配指定type型別input元素jQuery型別
- <button>和<input type=“button“> 的區別
- html input type=file 選擇圖片,圖片預覽 純html js實現圖片預覽HTMLJS
- querydsl報錯: Attempt to recreate a file for type
- input file multiple 批量上傳檔案
- js 讀取 input file 的內容JS
- no input file specified 三種解決方法
- angular input 為file on-change 無效Angular
- input的type值型別和描述-HTML型別HTML
- 關於element ui input標籤的改造樣式UI
- err Invalid input of type: 'dict'. Convert to a byte, string or number first
- `jsonb` 報錯 `invalid input syntax for type timestamp with time zone ““JSON
- Web 伺服器顯示 no input file specifiedWeb伺服器
- 專案遷移 寶塔 No input file specified
- 網站開啟提示:”No input file specifed.“網站
- 使用url()後出現No input file specified.