ITPub博客

首页 > 应用开发 > Html/css > html实现局部文件上传

html实现局部文件上传

Html/css 作者:Mac小星星 时间:2020-10-17 16:18:01 0 删除 编辑

引语:大家都知道,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. 演示代码

本地上传

打包工具


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

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

原文转自http://www.orsoon.com/news/173981.html


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69983559/viewspace-2727605/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-09-10

  • 博文量
    72
  • 访问量
    27247