input[type=file] 样式美化,input上传按钮美化,使用ajax上传无须控件上传文件
2016-08-22 10:52
781 查看
效果如下:
html代码如下
后台代码则看需要,举例jfinal的获取文件方式如下:
html代码如下
<form id="import-form" action="xx" class="formForm" method="post" enctype="multipart/form-data"> <div class="input-append"> <input id="fileinput" type="file" name="files" style="display: none;" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /> <input id="fileinput2" class="span2" type="text" /> <span class="btn btn-info " onclick="$('input[id=fileinput]').click();" > <i class="fa fa-folder-open"></i>选择文件</span> </div> </form> <!--js--> <script type="text/javascript"> $('input[id=fileinput]').change(function() { $('#fileinput2').val($(this).val()); }); <!--由于我的提交按钮是弹出框上的按钮,所以html代码上没有提交按钮,提交按钮代码如下--> function dosave(){ var formData = new FormData($( "#import-form" )[0]); $.ajax({ url: 'xx' , type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { alert(returndata); }, error: function (returndata) { alert(returndata); } }); } </script>
后台代码则看需要,举例jfinal的获取文件方式如下:
UploadFile file = getFile(); List<Object[]> data = ReadExcel.read(file.getUploadPath()+"/"+file.getFileName()); int row = 0; for (Object[] objs : data) { System.out.println(objs[1]); }
相关文章推荐
- Toast各种样式对话框集合—+demo+注释,亲测。从简单到复杂
- CSS:加边框内容收缩解决
- angular修改标签css修改的三种方法
- css3动画
- CSS2/CSS3 垂直水平居中
- CSS实现左图右文混排布局的方法
- CSS文字图片div元素居中方法之水平居中
- div+css布局中父层div高度不随子div高度变化的解决方法(clear属性使用方法)
- DIV+CSS position定位方法的使用
- 【转】CSS hack浏览器兼容一览表
- HTML&CSS基础学习笔记1.24-input标签隐藏元素
- css3 transition
- 让body、Div占满整个浏览器的窗口
- CSS3——变形功能
- 22个必备的CSS小技巧
- CSS------ vertical-align
- CSS 中背景图片定位方法
- 适合Web开发人员的10个CSS代码生成器
- 你想要的CSS居中方法大全
- 图解css3之背景