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按钮的时候,图片信息就 ...
随机推荐
- NSLog 输出格式集合
• %@ 对象 • %d, %i 整数 • %u 无符整形 • %f 浮点/双字 • %x, %X 二进制整数 • %o 八进制整数 • %zu size_t • %p 指针 • %e 浮 ...
- JAVA常见算法题(三十)
package com.forezp.util; import java.io.BufferedReader; import java.io.FileReader; import java.io.In ...
- java性能监控器VisualVM
1.mac系统启动文件位置:/Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home/bin/jvisualvm 2.linux ...
- [转] SQL SERVER拼接字符串（字符串中有变量）
本文转自:http://blog.csdn.net/sikaiyuan2008/article/details/7848926 SQL SERVER拼接字符串(字符串中有变量)对我来说是一个难点,总是 ...
- Delphi中Frame的使用方法（1）
Frame是组件面板上的第一个组件,但不是每个人都知道怎么用它,因为它不像Button和Label一样简单明了.实际上,Frame按钮只是打开一个Frame的列表,如果你没有创建任何的Frame,自然 ...
- transparent shadow caster unity
https://forum.unity.com/threads/semitransparent-shadows.276490/ semitransparent shadows dither 类似alp ...
- Index 和 Type 的区别
原文: Index vs. Type By Adrien Grand 译者: fengchang 对于 ES 的新用户来说,有一个常见的问题:要存储一批新的数据时,应该在已有 index 里新建一个 ...
- 014敲代码将一个栈按升序排序,对这个栈是怎样实现的，你不应该做不论什么特殊的如果(keep it up)
敲代码将一个栈按升序排序. 对这个栈是怎样实现的,你不应该做不论什么特殊的如果. 程序中能用到的栈操作有:push | pop |isEmpty 最easy想到的就是优先队列来做此题.easy实现. ...
- Android布局属性集合
<!-- android:id —— 为控件指定相应的ID android:text —— 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串 andro ...
- vue - src for components || router(index.js)
描述:重新编写一个组件 1.1 编写一个PrintName.vue <!--这里是模板 --> <template> <div class="hello&quo ...