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按钮的时候,图片信息就 ...
随机推荐
- Android内存优化12 内存泄漏常见情况3 注册泄漏
android 中有很多注册和反注册,由于在注册后,上下文自身会被持久化的观察者列表所持有,如果不进行反注册,就会造成内存泄漏 内存泄漏1:Sensor Manager 代码如下: MainActiv ...
- Tex系列: pgfplots安装
(1) 上网下载最新宏包压缩包 http://sourceforge.net/projects/pgfplots/files/pgfplots/ (2)解压压缩包,把该包下的tex子目录拷贝至D:\ ...
- jenkins的slave报错误： org.owasp.dependencycheck.data.nvdcve.DatabaseException: Exception retrieving vulnerability for cpe:/a:mysql:mysql:5.1.26
目前的临时解决办法是通过任务分配到master节点跑
- MFC【17-3】线程和线程同步化
17.3小知识点 17.3.1消息泵 编写一个应用程序,让它响应某菜单命令,画几千个椭圆. void CMFC线程View::OnStartDrawing(void) { m_bQuit=FALSE; ...
- asp.net mvc 3 配置全局错误处理 Web.config中设置CustomError
摘自: http://www.myexception.cn/web/1130191.html asp.net mvc 配置全局异常处理 Web.config中设置CustomError Web.con ...
- Eclipse 构建Maven项目--普通web项目
一.Maven项目的新建 1.鼠标右键---->New----->Maven Project 2.直接点下一步 3.选中 maven-archetype-webapp 后点击下一步 4. ...
- CentOS7 下安装 Lnmp 架设 Laravel
最近在hostos上买了个香港的 vps, 装的 centos7, 在架设了 pptp vpn, 效果还行,就想顺便架设个 laravel 看看.下面是架设的过程.准备工作 更新 yum 源,自带的源 ...
- Deferred content load was not performed. To provide the content, subscribe to the View's QueryControl event
{"Deferred content load was not performed. To provide the content, subscribe to the View's Quer ...
- AngularJS路由设置方法
Module.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/mall-home', { tem ...
- Android 底部TabActivity（1）——FragmentActivity
先看看效果图: 第一篇Tab系列的文章首先实现这样的风格的底部Tab:背景条颜色不变,我们是用了深灰的颜色,图标会发生对应的变化.当选中某个标签后该标签的背板会由正常的颜色变为不正常,哈哈,是变为加深 ...