没有合适的资源?快使用搜索试试~ 我知道了~
引语:大家都知道,html中上传文件就一个input,type=file就搞定了。但是,这个标签的样式,实在不值得提点什么,要改动他的样式,恐怕也是较难的。但是其实挺简单,今天就来说说上传文件小技巧吧! 1. 怎样自定义样式? 1)、只管按照自己喜欢看到的样式去定义即可,如<a></a>,可以是背景图片效果,可以是文字指示,总之想怎么改怎么改!有了按钮,还需要一个文件名容器,用来存放选择上传文件时的名字,从而不让上传看起来枯涩难懂。 2)、添加真正需要上传的文件控件,并设置属性display:none;如 <
资源推荐
资源详情
资源评论
基于基于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;
资源评论
weixin_38519660
- 粉丝: 4
- 资源: 949
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功