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

最新推荐文章于 2024-08-07 11:45:20 发布

weixin_33681778

最新推荐文章于 2024-08-07 11:45:20 发布

阅读量174

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/bozhi/blog/735948

版权

为什么80%的码农都做不了架构师？>>>

效果如下：

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

转载于:https://my.oschina.net/bozhi/blog/735948