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按钮的时候,图片信息就 ...
随机推荐
- 使用Apache POI导出Excel小结--导出XLS格式文档
使用Apache POI导出Excel小结 关于使用Apache POI导出Excel我大概会分三篇文章去写 使用Apache POI导出Excel小结--导出XLS格式文档 使用Apache POI ...
- 网站怎么布局能解决不同浏览器对CSS解析的差异,使用css reset
很多地方都提到过CSS Reset这个概念,而且细心的朋友会发现,许多大网站的CSS文件中也含有CSS Reset内容. CSS Reset是什么? 在HTML标签在浏览器里有默认的样式,例如 p 标 ...
- entity framework 去缓存
MSDN上对MergeOption枚举的定义为: 成员名称 说明 AppendOnly 不会从数据源加载对象上下文中已存在的对象.这是查询或调用 EntityCollection<(Of < ...
- C++迭代器之'反向迭代器'
反向迭代器(Reverse Iterator)是普通迭代器的适配器,通过重新定义自增和自减操作,以达到按反序遍历元素的目的.如果在标准算法库中用反向迭代器来代替普通的迭代器,那么运行结果与正常情况下相 ...
- 流畅的python第十七章使用期物处理并发
从 Python 3.4 起,标准库中有两个名为 Future 的类:concurrent.futures.Future 和asyncio.Future.这两个类的作用相同:两个 Future 类的实 ...
- 使用kubeadm部署Kubernetes v1.13.3
kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具. 这个工具能通过两条指令完成一个kubernetes集群的部署: 1. 安装要求 在开始之前,部署Kubernetes集群 ...
- android开发笔记之Volley (1)
1. volley的简介 Volley is an HTTP library that makes networking for Android apps easier and most import ...
- mysql 比较隐秘的问题
2017-11-13 13:47:27:DEBUG DubboServerHandler-192.168.30.114:20990-thread-5 com.yryz.qshop.modules.in ...
- sublime text 2中“ctrl + `”快捷键无效
之前sublime 使用正常,这次在装插件的时候,发现ctrl + `快捷键失效了,无法调出控制台. 然后就一直按这两个键,肯定是被别的占用了,所以就像看看有啥反应,看了半天都没有见到什么神奇的窗口跳 ...
- ffmpeg对rtmp的基本操作[转]
ffplay和ffmpeg调用的库是一样的.我刚才试了一下,是可以播的.ffplay "rtmp://tsl.s1979.cutv.com:1935/cutvChannelLive/AxeF ...