基于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,让你的网页更自由!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。