基于ajax html实现文件上传技巧总结
引语：大家都知道，html中上传文件就一个input，type=file就搞定了。但是，这个标签的样式，实在不值得提点什么，要改动他的样式，恐怕也是较难的。但是其实挺简单，今天就来说说上传文件小技巧吧！
1.怎样自定义样式？
1）、只管按照自己喜欢看到的样式去定义即可，如<ahref='javascript:;'class='upload-button'></a>,可以是背景图片效果，可以是文字指示，总之想怎么改怎么改！有了按钮，还需要一个文件名容器，用来存放选择上传文件时的名字，从而不让上传看起来枯涩难懂。
2）、添加真正需要上传的文件控件，并设置属性display:none;如<inputtype='file'class='hide'/>,这样就有了真正的上传文件的地方了。所以，可以说，上传文件的界面有多漂亮取决你的想象力！
2.怎样触发事件？
这是个重点，触发的点应该是自己写的样式处，而真正起作用的元素却是隐藏的，但是并不影响它的点击效果，只需要给它触发一个点击事件即可，如$('#target-file').trigger('click');
3.多选文件？
多文件上传，只需使用html的一个file的multiple=true即可，当然你也可以选择第三方的上传控件，如swfupload，效果是真心不错的，但是对于不想用的插件的人，就不起作用了。
4. 相关插件？
界面美化其实可以使用jqueryui等插件；
要做一些友好的交互的话，都会用到ajax技术，无刷新切换、异步上传、提交，最后，其实ajax的路径也是可以保留的，使用pushState,replaceState实现pjax.
表单验证：validform.js
异步提交文件:jquery.form.js
友好的弹窗提示：layer.js
5.一点兼容性的问题？
做界面方面的工作，最怕的也是很重要的工作，就是各个浏览器之间的兼容性问题，下面主要列几点供参考：
table宽度的处理方式不一致;
select,input显示高度不一致;
alert弹窗不一致;
...
6.演示代码
<ahref="javascript:;"up-type-id="1"class="btnbtn-defaultsmall-btnswitch-upload-method"><span>本地上传</span></a>
<ahref="javascript:;"up-type-id="2"class="upload-file-insteadbtnbtn-defaultsmall-btnswitch-upload-method"><span>打包工具</span></a>
<inputtype="file"name="apkFiles[]"id="local-upload-real-file"class="upload-file-realhide"response-id="local-upload-container"multiple='true'/>
<inputtype="file"name="apkToolFiles[]"id="apk-tool-real-file"class="upload-file-realhide"response-id="apk-tool-container-textarea"/>
<script>
$(function(){
varalertTitle='系统提示：';
varsubmitId='#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');//失败后恢复可提交
returnfalse;
},
submitForm:function(){}//不再起作用
});
//切换上传方法
$('.switch-upload-method').off().on('click',function(){
//$(submitId).attr('disabled','disabled');
varpObj=$(this).parent().find('.switch-upload-method');
varindex=pObj.index(this);
varuploadTypeId=$('#upload-type-id').val();//上传方式：1:打包工具;2:本地上传,0:没有上传方式
varuploadType=$(this).attr('up-type-id');
if(parseInt($('#sub-channel-count').html())>0){
if(uploadTypeId!=uploadType){
layer.alert('还有子渠道包数据，不能完成切换，请先确认清除再切换！');
returnfalse;
}
}
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');
}elseif(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()){
returnfalse;
}
file_size=0;
filepath=$(this).val();
maxFileSize=30*1024*1024;
varbrowserCfg={};
varua=window.navigator.userAgent;
if(ua.indexOf("MSIE")>=1){
browserCfg.ie=true;
}elseif(ua.indexOf("Firefox")>=1){
browserCfg.firefox=true;
}elseif(ua.indexOf("Chrome")>=1){
browserCfg.chrome=true;
}
if(browserCfg.ie){
varimg=newImage();
img.src=filepath;
file_size=img.fileSize;
while(true){
if(img.fileSize>0){
if(img.fileSize>maxFileSize){
alert("上传包超过30MB限制，请使用打包工具上传！");
returnfalse;
}
break;
}
}
}else{
file_size=this.files[0].size;
if(file_size>maxFileSize){
alert("上传包超过30MB限制，请使用打包工具上传！");
returnfalse;
}
}
varresponseObjId=$(this).attr('response-id');
varresponseObj=$('#'+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();
vardelObj=$('#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('未知错误，请稍后再试！');
}
});
returnfalse;//防止dialog自动关闭
});
//打包工具
$('#apk-tool-real-file').off().on('change',function(){
if(!$(this).val()){
returnfalse;
}
varresponseObjId=$(this).attr('response-id');
varresponseObj=$('#'+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);
varparentContainer=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('未知错误，请稍后再试！');
}
});
returnfalse;//防止dialog自动关闭
});
$('.apk-tool-upload-button').on('click',function(){
$('#apk-tool-real-file').trigger('click');
});
});
</script>
以上，主要就是，使用隐藏的inputfile标签选择，选择文件之后立即ajax提交，最后，整个表单ajax提交的过程。
合理使用一些css,js,让你的网页更自由！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。