jquery實現(xiàn)簡潔文件上傳表單樣式
文章開始先告訴大家制作jquery實現(xiàn)簡潔文件上傳表單樣式的簡易教程。
效果圖:
頁面結(jié)構(gòu):
<div class="uploader white"> <input type="text" class="filename" readonly="readonly"/> <input type="button" name="file" class="button" value="Browse..."/> <input type="file" size="30"/> </div>
css文件樣式:
.uploader{ position:relative; display:inline-block; overflow:hidden; cursor:default; padding:0; margin:10px 0px; -moz-box-shadow:0px 0px 5px #ddd; -webkit-box-shadow:0px 0px 5px #ddd; box-shadow:0px 0px 5px #ddd; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .filename{ float:left; display:inline-block; outline:0 none; height:32px; width:180px; margin:0; padding:8px 10px; overflow:hidden; cursor:default; border:1px solid; border-right:0; font:9pt/100% Arial, Helvetica, sans-serif; color:#777; text-shadow:1px 1px 0px #fff; text-overflow:ellipsis; white-space:nowrap; -moz-border-radius:5px 0px 0px 5px; -webkit-border-radius:5px 0px 0px 5px; border-radius:5px 0px 0px 5px; background:#f5f5f5; background:-moz-linear-gradient(top, #fafafa 0%, #eee 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5)); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0); border-color:#ccc; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; box-shadow:0px 0px 1px #fff inset; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .button{ float:left; height:32px; display:inline-block; outline:0 none; padding:8px 12px; margin:0; cursor:pointer; border:1px solid; font:bold 9pt/100% Arial, Helvetica, sans-serif; -moz-border-radius:0px 5px 5px 0px; -webkit-border-radius:0px 5px 5px 0px; border-radius:0px 5px 5px 0px; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; box-shadow:0px 0px 1px #fff inset; } .uploader input[type=file]{ position:absolute; top:0; right:0; bottom:0; border:0; padding:0; margin:0; height:30px; cursor:pointer; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity:0; } input[type=button]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;} input[type=button]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;} input[type=text]::-moz-focus-inner{padding:0; border:0 none; -moz-box-sizing:content-box;} input[type=text]::-webkit-focus-inner{padding:0; border:0 none; -webkit-box-sizing:content-box;}
javascript部分代碼:
<script>$(function(){ $("input[type=file]").change(function(){$(this).parents(".uploader").find(".filename").val($(this).val());}); $("input[type=file]").each(function(){ if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("No file selected...");} }); }); </script>
下載地址: jquery實現(xiàn)簡潔文件上傳表單樣式
希望這款簡潔實用的jquery實現(xiàn)文件上傳表單樣式大家會喜歡,并可以應(yīng)用到自己的項目中。
- jQuery異步提交表單的兩種方式
- jquery獲取多個checkbox的值異步提交給php
- jquery獲取多個checkbox的值異步提交給php的方法
- Jquery異步提交表單代碼分享
- Jquery.Form 異步提交表單的簡單實例
- jquery ajaxSubmit 異步提交的簡單實現(xiàn)
- jquery下異步提交表單 異步跨域提交表單
- 分享20多個很棒的jQuery 文件上傳插件或教程
- jQuery Ajax文件上傳(php)
- Jquery結(jié)合HTML5實現(xiàn)文件上傳
- js jquery分別實現(xiàn)動態(tài)的文件上傳操作按鈕的添加和刪除
- JQuery異步提交表單與文件上傳功能示例
相關(guān)文章
jQuery 獲取select選中值及清除選中狀態(tài)
這篇文章主要介紹了jQuery 獲取select選中值及清除選中狀態(tài)的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-12-12JQuery實現(xiàn)動態(tài)表格點擊按鈕表格增加一行
動態(tài)表格,功能為點擊添加按鈕,表格增加一行并給其name屬性賦予的值,點擊刪除,自動刪除這一行,具體實現(xiàn)如下2014-08-08jquery實現(xiàn)在頁面加載的時自動為日期插件添加當前日期
這篇文章主要介紹了通過jquery實現(xiàn)在頁面加載的時自動為日期插件添加當前日期,需要的朋友可以參考下2014-08-08jQuery實現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色
這篇文章主要介紹了jQuery實現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色,比較實用,也很簡單,使用到了一個resize事件需要的朋友可以參考下2014-10-10jQuery實現(xiàn)搜索頁面關(guān)鍵字的功能
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)搜索頁面關(guān)鍵字的功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法
這篇文章主要介紹了Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05