input[type=file] 样式美化，input上传按钮美化,使用ajax上传无

效果如下：

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]);
	    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!