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按钮的时候,图片信息就 ...
随机推荐
- 通过HTTP发包工具了解HTTP协议
一.HTTP.pl功能简介 HTTP.pl perl编写的发包工具,简化版本curl,像curl致敬(唉,“致敬”都被于妈玩坏了). 该发包工具支持HEAD,GET,METHOD三种基本请求方法, ...
- web前端入坑第二篇：web前端到底怎么学？干货资料！ 【转】
http://blog.csdn.net/xllily_11/article/details/52145172 版权声明:本文为博主[小北]原创文章,如要转载请评论回复.个人前端公众号:前端你别闹,J ...
- Firefox的缓存问题
使用Firefox调试代码时,JS或CSS文件修改后,怎么刷新都不生效.原来是Firefox缓存的问题.但Firefox没有像IE一样有个每次读取最新的设置. 设置Firefox不缓存页面: 新建标签 ...
- iOS exit(),abort(),assert()函数区别
iOS exit(),abort(),assert()函数区别 exit() 退出程序 abort() 停止程序, assert()检查里面的参数如果为nil抛出异常:
- 字符串在内存中的存储——C语言进阶
字符串是以ASCII字符NUL结尾的字符序列. ASCII字符NUL表示为\0.字符串通常存储在数组或者从堆上分配的内存中.只是,并不是全部的字符数组都是字符串,字符数组可能没有NUL字符. 字符数组 ...
- 优秀运维人员20道必会iptables面试题(转载)
(一)企业面试口试题 1.详述iptales工作流程以及规则过滤顺序? 2.iptables有几个表以及每个表有几个链? 3.iptables的几个表以及每个表对应链的作用,对应企业应用场景? 4.画 ...
- [Objective-C] - NSObject
Foundation Framework Classes Data Storage: NSData provides object-oriented storage for arrays of ...
- AngularJS模块具体解释
模块是提供一些特殊服务的功能块.比方本地化模块负责文字本地化,验证模块负责数据验证.一般来说,服务在模块内部,当我们须要某个服务的时候,是先把模块实例化.然后再调用模块的方法. 但Angular模块和 ...
- 一款实现浏览实事的资讯平台app
一款实现浏览实事的资讯平台app 如有转载,请注明出处:http://blog.csdn.net/u012301841/article/details/46687447 github链接:https: ...
- [Java Performance] JVM 线程调优
调整线程栈空间 当很缺少内存时,能够调整线程使用的内存. 每一个线程都有一个栈,用来记录该线程的调用栈信息.线程中的栈的默认空间是有OS和JVM的版本号决定的: OS 32-bit 64-bit Li ...