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