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

前端之家收集整理的这篇文章主要介绍了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]);
	    }
原文链接:https://www.f2er.com/ajax/161921.html

猜你在找的Ajax相关文章