文档章节

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

小石头哥
 小石头哥
发布于 2016/08/22 10:52
字数 244
阅读 874
收藏 2

「深度学习福利」大神带你进阶工程师,立即查看>>>

效果如下:

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

 

小石头哥

小石头哥

粉丝 8
博文 19
码字总数 14635
作品 0
广州
后端工程师
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.7K
8
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
718
1
CDH5: 使用parcels配置lzo

一、Parcel 部署步骤 1 下载: 首先需要下载 Parcel。下载完成后,Parcel 将驻留在 Cloudera Manager 主机的本地目录中。 2 分配: Parcel 下载后,将分配到群集中的所有主机上并解压缩。 3 激...

cloud-coder
2014/07/01
6.9K
1
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
树莓派(Raspberry Pi):完美的家用服务器

自从树莓派发布后,所有在互联网上的网站为此激动人心的设备提供了很多有趣和具有挑战性的使用方法。虽然这些想法都很棒,但树莓派( RPi )最明显却又是最不吸引人的用处是:创建你的完美家用...

异次元
2013/11/09
8K
8

没有更多内容

加载失败,请刷新页面

加载更多

汇总你在 Linux 上的命令使用情况

使用合适的命令,你可以快速了解 Linux 系统上使用的命令以及执行的频率。 汇总 Linux 系统上使用的命令只需一串相对简单的命令以及几条管道将它们绑定在一起。当你的历史记录缓冲区保留了最...

osc_bvincwvq
49分钟前
14
0
Hacker News 简讯 2020-08-15

最后更新时间: 2020-08-15 07:01 Welders set off Beirut blast while securing explosives - (maritime-executive.com) 焊工在固定炸药的同时引爆了贝鲁特爆炸 得分:383 | 评论:322 Factor......

FalconChen
今天
24
0
OSChina 周六乱弹 —— 老椅小猫秋乡梦 梦里石台堆小鱼

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @小小编辑 :《MOM》- 蜡笔小心 《MOM》- 蜡笔小心 手机党少年们想听歌,请使劲儿戳(这里) @狄工 :腾讯又在裁员了,35岁以上清退,抖音看到...

小小编辑
今天
159
4
构建高性能队列,你不得不知道的底层知识!

前言 本文收录于专辑:http://dwz.win/HjK,点击解锁更多数据结构与算法的知识。 你好,我是彤哥。 上一节,我们一起学习了如何将递归改写为非递归,其中,用到的数据结构主要是栈。 栈和队列...

彤哥读源码
今天
17
0
Anaconda下安装keras和tensorflow

Anaconda下安装keras和tensorflow 一、下载并安装Anaconda: Anaconda下载 安装步骤: 如果是多用户操作系统选择All Users,单用户选择Just Me 选择合适的安装路径 然后勾选这个,自动配置环境...

Atlantis-Brook
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部