ajax+html+方法,ajax+html实现文件上传有哪几种方法

这次给大家带来ajax+html实现文件上传有哪几种方法，ajax+html实现文件的注意事项有哪些，下面就是实战案例，一起来看一下。

引语：大家都知道，html中上传文件就一个input，type=file就搞定了。但是，这个标签的样式，实在不值得提点什么，要改动他的样式，恐怕也是较难的。但是其实挺简单，今天就来说说上传文件小技巧吧！

1. 怎样自定义样式？

1)、只管按照自己喜欢看到的样式去定义即可，如,可以是背景图片效果，可以是文字指示，总之想怎么改怎么改！有了按钮，还需要一个文件名容器，用来存放选择上传文件时的名字，从而不让上传看起来枯涩难懂。

2)、添加真正需要上传的文件控件，并设置属性display:none;如 , 这样就有了真正的上传文件的地方了。所以，可以说，上传文件的界面有多漂亮取决你的想象力！

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. 演示代码本地上传

打包工具

$(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');

});

});

以上，主要就是，使用隐藏的input file标签选择，选择文件之后立即ajax提交，最后，整个表单ajax提交的过程。

合理使用一些css, js, 让你的网页更自由！

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

ajax怎样提交form表单与实现文件上传

Ajax向后台传输json格式数据出现错误应如何处理