基于ajax的html如何实现文件上传

这篇文章主要介绍基于ajax的html如何实现文件上传，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

专注于为中小企业提供做网站、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业临江免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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. 演示代码

本地上传
打包工具

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

以上是“基于ajax的html如何实现文件上传”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！