jquery的input:type=file实现文件上传
<!DOCTYPE html>
<html>
<head>
<title>html5_2.html</title>
<style>
#up{
z-index: 19891015;
width: 600px;
height: 350px;
position: relative;
}
.title{
background: #009f95;
color: #fff;
border: none;
padding: 0 80px 0 20px;
height: 42px;
line-height: 42px;
font-size:14px;
border-radius: 2px 2px 0 0;
}
.file-box{
display: inline-block;
overflow: hidden;
height: 38px;
line-height: 38px;
padding: 0 18px;
background-color: #0e9aef;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: 14px;
border: none;
border-radius: 2px;
cursor: pointer;
position: absolute;
bottom: 8px;
right: 164px;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
outline: none;
background-color: transparent;
filter:alpha(opacity=0);
opacity: 0;
}
.startBtn{
display: inline-block;
height: 38px;
line-height: 38px;
padding: 0 18px;
background-color: #009688;
color: #fff;
white-space: nowrap;
text-align: center;
font-size: 14px;
border: none;
border-radius: 2px;
cursor: pointer;
position: absolute;
bottom: 8px;
right: 42px;
}
th{
width: 155px;
min-height: 20px;
height: 28px;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
padding: 9px 15px;
line-height: 20px;
font-size: 14px;
background:#f7f7f7;
text-align: center;
}
table{
border-spacing: 0;
margin: 0 auto;
/*border:1px solid #777;*/
}
thead{
color:#666;
}
td{
text-align: center;
} </style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head>
<body>
<div id="up">
<div class="title">文件上传</div>
<table>
<thead>
<tr>
<th><div class="layui-table-cell laytable-cell-2-status" align="center"><span>文件名</span></div></th>
<th><div class="layui-table-cell laytable-cell-2-status" align="center"><span>大小</span></div></th>
<th><div class="layui-table-cell laytable-cell-2-status" align="center"><span>状态</span></div></th>
<th><div class="layui-table-cell laytable-cell-2-status" align="center"><span>操作</span></div></th>
</tr>
</thead>
<tbody> </tbody>
</table>
<!--<input type="file" id="pic" name="pic" onchange="showPic()" value="选择多文件"/>-->
<form class="file-box" >
<input type="file"
multiple="multiple"
class="file-btn"
id="pic"
name="pic" >
选择多文件
</form>
<button class="startBtn" >
开始上传
</button>
</div>
</body>
</html>
<script type="text/javascript">
function uploadFile(){
// var pic = $("#pic").get(0).files[0];
var pic=$('#pic').get(0).files;
console.log(pic.length)
var formData = new FormData();
for(var i=0;i<pic.length;i++){
formData.append("pic['+i+']",pic[i]);
}
formData.append("file" , pic[0]); $.ajax({
type: "POST",
url: '/rm/up/upload.afca',
data: formData ,
processData : false,
contentType : false ,//必须false才会自动加上正确的Content-Type
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});
}
// 设置进度条
function onprogress(evt){
var loaded = evt.loaded; //已经上传大小情况
var tot = evt.total; //附件总大小
var per = Math.floor(100*loaded/tot);
$('#parent progress').val(per);
if(per=='100'){
$('#parent progess').css('display','none');
$('#parent').text('上传成功');
}
$("#son").css("width" , per +"%");
} $('.file-btn').on('change',function(){
// 获取上传的文件名字
var str=$(this).val();
if(str!==""){
var arr=str.split("\\");
var fileName=arr[arr.length-1];
}
// 获取上传文件的大小
if (pic) {
var fileSize = 0;
if (pic.size > 1024 * 1024)
fileSize = (Math.round(pic.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(pic.size * 100 / 1024) / 100).toString() + 'KB';
} var tr = $(['<td>'+fileName+'</td>'
,'<td>'+fileSize+'</td>'
,'<td id="situation"><div>等待上传</div></td>'
,'<td id="deletePile"><button>删除</button></td>'
,'</div>'
,'</td>'
,'</tr>'].join(''));
console.log(tr);
$('tbody').html(tr);
});
// 开始按钮
$(".startBtn").on("click",function(){
uploadFile();
$('#situation').html('<div id="parent" style="color:green;"><progress value="0" max="100"></progress></div>')
});
</script>
jquery的input:type=file实现文件上传的更多相关文章
- input type="file" accept="image/*"上传文件慢的问题解决办法
相信大家都写过<input type="file" name="file" class="element" accept=" ...
- input type=file实现图片上传，预览以及图片删除
背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...
- input type="file"多图片上传 原生html传递的数组集合
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- input type=file实现图片上传
<label for="file"> <img src="images/morende.jpg" alt=""> & ...
- input type="file"多图片上传
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- 获取input type=file 的文件内容（纯文本）
一.获取input type=file 的文件内容(纯文本) 1.需求一 通过点击其他事件,来触发 文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...
- jquery判断 input type="file"上传文件是否为空
要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...
- jQuery File Upload 文件上传插件使用一 (最小安装 基本版)
jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等. 可以说你能想到的功能它都有.你没想到的功能它也有.. ...
- jQuery File Upload文件上传插件简单使用
前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...
随机推荐
- 突破，Objective-C开发速学手册
<突破,Objective-C开发速学手册> 基本信息 作者: 傅志辉 出版社:电子工业出版社 ISBN:9787121207426 上架时间:2013-7-12 出版日期:2013 年8 ...
- intellij idea 热部署、热加载设置方法
https://blog.csdn.net/wangjun5159/article/details/55223630 https://blog.csdn.net/wangjun5159/article ...
- [转]SSIS OLE DB Source中执行带参数的存储过程
本文转自:http://www.cnblogs.com/michaelxu/archive/2009/10/21/1587450.html 问题描述:执行一个存储过程得到一个多条记录的结果集,然后循环 ...
- oracle 10g函数大全--字符型函数
ASCII(x1) [功能]:返回字符表达式最左端字符的ASCII 码值. [参数]:x1,字符表达式 [返回]:数值型 [示例] SQL> select ascii('A') A,ascii( ...
- SQL 之 Group By
SQL 之 Group By Group By从字面意义上理解就是根据By指定的规则对数据进行分组,所谓的分组就是将一个数据表划分成若干个小区域. 例如:有这么一张表
- Codeforces 570D TREE REQUESTS dfs序+树状数组 异或
http://codeforces.com/problemset/problem/570/D Tree Requests time limit per test 2 seconds memory li ...
- mac osx加入全局启动terminal快捷键
尽管有非常多第三方工具(Alfred.keyboad Maestro)能够设置全局启动terminal快捷键,但怎么感觉都不如native的好,呵呵.本文就使用mac 自带的Automator来创建一 ...
- centos6.8服务器配置之vsftpd配置
vsftpd: version 2.2.2一.安装:因对版本要求不高,所以采用yum安装 yum install -y vsftpdckconfig vsftpd on 二.配置: 1.建立ftp用户 ...
- 【转】maven常见问题问答
转自:http://www.iteye.com/topic/973166 前言 Maven,发音是[`meivin],"专家"的意思.它是一个很好的项目管理工具,很早就进入了我的必 ...
- Linux 静态链接库和动态连接库
(0)文件夹 VMware 下安装Ubuntu的吐血经历 零基础学习Shell编程 Linux下的makefile的妙用 Linux调试神器 -- gdb 十分钟学会Python的基本类型 Linux ...