您的位置:首页 > Web前端 > CSS

input[type=file] 样式美化,input上传按钮美化,使用ajax上传无须控件上传文件

2016-08-22 10:52 781 查看
效果如下:



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]);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: