这次给大家带来ajax+html轻松实现文件上传有哪些步骤，ajax+html轻松实现文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。
引语：大家都知道，html中上传文件就一个input，type=file就搞定了。但是，这个标签的样式，实在不值得提点什么，要改动他的样式，恐怕也是较难的。但是其实挺简单，今天就来说说上传文件小技巧吧！
1. 怎样自定义样式？
1）、只管按照自己喜欢看到的样式去定义即可，如<a href='javascript:;' class='upload-button'></a>,可以是背景图片效果，可以是文字指示，总之想怎么改怎么改！有了按钮，还需要一个文件名容器，用来存放选择上传文件时的名字，从而不让上传看起来枯涩难懂。
2）、添加真正需要上传的文件控件，并设置属性display:none;如 <input type='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. 演示代码
<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 = '系统提示：';
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'); //失败后恢复可提交
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('还有子渠道包数据，不能完成切换，请先确认清除再切换！');
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限制，请使用打包工具上传！);
return false;
}
break;
}
}
} else {
file_size = this.files[0].size;
if (file_size > maxfilesize) {
alert(上传包超过30mb限制，请使用打包工具上传！);
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('未知错误，请稍后再试！');
}
});
return false;//防止dialog 自动关闭
});
//打包工具
$('#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('未知错误，请稍后再试！');
}
});
return false;//防止dialog 自动关闭
});
$('.apk-tool-upload-button').on('click', function(){
$('#apk-tool-real-file').trigger('click');
});
});
</script>
以上，主要就是，使用隐藏的input file标签选择，选择文件之后立即ajax提交，最后，整个表单ajax提交的过程。
合理使用一些css, js, 让你的网页更自由！
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
ajax()与后台交互使用详解
处理webservice跨域问题方法详解
以上就是ajax+html轻松实现文件上传有哪些步骤的详细内容。