引語：大家都知道，html中上傳文件就一個(gè)input，type=file就搞定了。但是，這個(gè)標(biāo)簽的樣式，實(shí)在不值得提點(diǎn)什么，要改動(dòng)他的樣式，恐怕也是較難的。但是其實(shí)挺簡(jiǎn)單，今天就來說說上傳文件小技巧吧！
1. 怎樣自定義樣式？
1）、只管按照自己喜歡看到的樣式去定義即可，如a href='javascript:;' class='upload-button'>/a>,可以是背景圖片效果，可以是文字指示，總之想怎么改怎么改！有了按鈕，還需要一個(gè)文件名容器，用來存放選擇上傳文件時(shí)的名字，從而不讓上傳看起來枯澀難懂。
2）、添加真正需要上傳的文件控件，并設(shè)置屬性display:none;如 input type='file' class='hide' />, 這樣就有了真正的上傳文件的地方了。所以，可以說，上傳文件的界面有多漂亮取決你的想象力！
2. 怎樣觸發(fā)事件？
這是個(gè)重點(diǎn)，觸發(fā)的點(diǎn)應(yīng)該是自己寫的樣式處，而真正起作用的元素卻是隱藏的，但是并不影響它的點(diǎn)擊效果，只需要給它觸發(fā)一個(gè)點(diǎn)擊事件即可，如$('#target-file').trigger('click');
3. 多選文件？
多文件上傳，只需使用html的一個(gè)file的multiple=true即可，當(dāng)然你也可以選擇第三方的上傳控件，如swfupload，效果是真心不錯(cuò)的，但是對(duì)于不想用的插件的人，就不起作用了。
4. 相關(guān)插件？
界面美化其實(shí)可以使用jqueryui等插件；
要做一些友好的交互的話，都會(huì)用到ajax技術(shù)，無刷新切換、異步上傳、提交，最后，其實(shí)ajax的路徑也是可以保留的，使用pushState, replaceState 實(shí)現(xiàn) pjax .
表單驗(yàn)證：validform.js
異步提交文件: jquery.form.js
友好的彈窗提示：layer.js
5. 一點(diǎn)兼容性的問題？
做界面方面的工作，最怕的也是很重要的工作，就是各個(gè)瀏覽器之間的兼容性問題，下面主要列幾點(diǎn)供參考：
table寬度的處理方式不一致;
select, input顯示高度不一致;
alert彈窗不一致;
...
6. 演示代碼
a href="javascript:;" up-type-id="1" class="btn btn-default small-btn switch-upload-method">span>本地上傳/span>/a>
a href="javascript:;" up-type-id="2" class="upload-file-instead btn btn-default small-btn switch-upload-method">span>打包工具/span>/a>
input type="file" name="apkFiles[]" id="local-upload-real-file" class="upload-file-real hide" response-id="local-upload-container" multiple='true' />
input type="file" name="apkToolFiles[]" id="apk-tool-real-file" class="upload-file-real hide" response-id="apk-tool-container-textarea" />
script>
$(function(){
var alertTitle = '系統(tǒng)提示：';
var submitId = '#do-submit';
$('#taskForm').Validform({
btnSubmit: submitId,
tiptype: 1,
ignoreHidden: true,
dragonfly: false,
tipSweep: true,
label: ".label",
showAllError: false,
postonce: true,
ajaxPost: true,
datatype:{
},
beforeCheck:function(curform){
},
beforeSubmit:function(curform){
$('.upload-file-real').attr('disabled', 'disabled');
$(submitId).attr('disabled', 'disabled'); //提交前禁用按鈕
ajaxSubmitForm(curform);
$(submitId).removeAttr('disabled'); //失敗后恢復(fù)可提交
return false;
},
submitForm: function(){} //不再起作用
});
//切換上傳方法
$('.switch-upload-method').off().on('click', function(){
// $(submitId).attr('disabled', 'disabled');
var pObj = $(this).parent().find('.switch-upload-method');
var index = pObj.index(this);
var uploadTypeId = $('#upload-type-id').val(); //上傳方式：1:打包工具;2:本地上傳,0:沒有上傳方式
var uploadType = $(this).attr('up-type-id');
if(parseInt($('#sub-channel-count').html()) > 0){
if(uploadTypeId != uploadType){
layer.alert('還有子渠道包數(shù)據(jù)，不能完成切換，請(qǐng)先確認(rèn)清除再切換！');
return false;
}
}
pObj.not(':eq(' + index + ')').removeClass('btn-danger').addClass('btn-default');
pObj.eq(index).removeClass('btn-default').addClass('btn-danger');
if(uploadType == 36){ //local-upload
$('#upload-type-id').val(uploadType);
$('#init-apk-container').show();
$('#apk-tool-container').hide();
$('#upload-main-control').find('.del-it-main').css({display: 'inline-block'});
$('#local-upload-real-file').trigger('click');
}else if(uploadType == 35){ //apk-tool
$('#upload-type-id').val(uploadType);
$('#init-apk-container').hide();
$('#local-upload-container').hide();
$('#upload-main-control').find('.del-it-main').hide();
$('#apk-tool-container').show();
}
});
//本地上傳
$('#local-upload-real-file').off().on('change', function(){
if(!$(this).val()){
return false;
}
file_size = 0;
filepath = $(this).val();
maxFileSize = 30 * 1024 * 1024;
var browserCfg = {};
var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE") >=1 ){
browserCfg.ie = true;
}else if(ua.indexOf("Firefox") >=1 ){
browserCfg.firefox = true;
}else if(ua.indexOf("Chrome") >=1 ){
browserCfg.chrome = true;
}
if (browserCfg.ie) {
var img = new Image();
img.src = filepath;
file_size = img.fileSize;
while (true) {
if (img.fileSize > 0) {
if (img.fileSize > maxFileSize) {
alert("上傳包超過30MB限制，請(qǐng)使用打包工具上傳！");
return false;
}
break;
}
}
} else {
file_size = this.files[0].size;
if (file_size > maxFileSize) {
alert("上傳包超過30MB限制，請(qǐng)使用打包工具上傳！");
return false;
}
}
var responseObjId = $(this).attr('response-id');
var responseObj = $('#' + responseObjId);
$('#taskForm').ajaxSubmit({
url:'/aa/bb/uploadTmpApk',
resetForm: false,
dataType: 'json',
beforeSubmit: function(option){
window.loading = layer.load(2);
},
success: function(data, statusText){
layer.close(window.loading);
if(data.status == 1){
$('#version-identifier').val(data.version);
responseObj.html(data.apkInfoHtml);
responseObj.show();
var delObj = $('#upload-main-control').find('.del-it-main');
delObj.css({'display': 'inline-block'});
$('#sub-channel-count').html(data.apkTotal);
$('#init-apk-container').hide();
$(submitId).removeAttr('disabled');
}else{
layer.alert(data.info, {title: alertTitle});
}
},
error: function(data){
layer.close(window.loading);
layer.alert('未知錯(cuò)誤，請(qǐng)稍后再試！');
}
});
return false;//防止dialog 自動(dòng)關(guān)閉
});
//打包工具
$('#apk-tool-real-file').off().on('change', function(){
if(!$(this).val()){
return false;
}
var responseObjId = $(this).attr('response-id');
var responseObj = $('#' + responseObjId);
$('#Form').ajaxSubmit({
url:'/aa/bb/uploadTmpApkTool',
resetForm: false,
dataType: 'json',
beforeSubmit: function(option){
window.loading = layer.load(2);
},
success: function(data, statusText){
layer.close(window.loading);
if(data.status == 1){
$('#version-identifier').val(data.version);
responseObj.html(data.infoHtml);
var parentContainer = responseObj.parent().parent(),
nameContainer = parentContainer.find('.apk-name-container'),
delObj = parentContainer.find('.del-it-apk-tool');
nameContainer.html(data.apkName);
nameContainer.attr('title', data.apkName);
$('#apk-tool-file-tmp').html(data.fileInfo);
$(submitId).removeAttr('disabled');
}else{
layer.alert(data.info, {title: alertTitle});
}
},
error: function(data){
layer.close(window.loading);
layer.alert('未知錯(cuò)誤，請(qǐng)稍后再試！');
}
});
return false;//防止dialog 自動(dòng)關(guān)閉
});
$('.apk-tool-upload-button').on('click', function(){
$('#apk-tool-real-file').trigger('click');
});
});
/script>
以上，主要就是，使用隱藏的input file標(biāo)簽選擇，選擇文件之后立即ajax提交，最后，整個(gè)表單ajax提交的過程。
合理使用一些css, js, 讓你的網(wǎng)頁(yè)更自由！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- HTML5 Ajax文件上傳進(jìn)度條如何顯示
- javascript HTML5文件上傳FileReader API
- javascript html5移動(dòng)端輕松實(shí)現(xiàn)文件上傳
- 基于javascript html5實(shí)現(xiàn)多文件上傳
- 基于HTML5 Ajax實(shí)現(xiàn)文件上傳并顯示進(jìn)度條
- js HTML5 Ajax實(shí)現(xiàn)文件上傳進(jìn)度條功能
- Jquery結(jié)合HTML5實(shí)現(xiàn)文件上傳
- 使用PHP和HTML5 FormData實(shí)現(xiàn)無刷新文件上傳教程
- asp.net html控件的File控件實(shí)現(xiàn)多文件上傳實(shí)例分享
- asp.net HTML文件上傳標(biāo)簽
