澳门新萄京JS实现表单多文件上传样式美化支持选
分类:服务器

支付中会平时提到到文件上传的要求,遵照作业区别的必要,有例外的公文上传处境。

JS达成表单多文件上传样式美化辅辅助选举粤语件后去除相关项,js文件上传

付出中会常常涉及到文件上传的急需,依照作业分裂的供给,有两样的文书上传景况。

有简短的单文件上传,有多文本上传,因浏览器原生的文本上传样式及职能的支撑度不算太高,超多时候大家会对体制举行美化,对职能进行完美。

本文依照一个事例,对多文本的上传样式做了有的简短的美化(其实也没怎么美化。。),同一时间帮衬选用文件后自定义删除相关的文件,最终再上传

文章篇幅较长,先轻便看看图示:

澳门新萄京 1

后生可畏、文件上传根基

1. 单文本上传

最简易的文件上传,是单文件上传,form标签中步向enctype="multipart/form-data",form表单中有二个input[type="file"]项

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
<input type="text" name="user" id="user" placeholder="请输入昵称">
<input type="file" name="userImage" id="userImage">
<input type="submit" name="sub" value="提交">
</form>

2. 多文本上传

  1)雷同单文件上传,轻便的多文件上传其实就是多多少个input[type="file"]项

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
<input type="text" name="user" id="user" placeholder="请输入昵称">
<input type="file" name="userImage1" id="userImage1">
<input type="file" name="userImage2" id="userImage2">
<input type="file" name="userImage3" id="userImage3">
<input type="submit" name="sub" value="提交">
</form>

  2卡塔尔(英语:State of Qatar)HTML5为表单文件项新添了三个multiple属性,能够设置完毕选拔四个文件,如

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
<input type="text" name="user" id="user" placeholder="请输入小名">
<input type="file" name="userImage" id="userImage" multiple>
<input type="submit" name="sub" value="提交">
</form>

澳门新萄京 2

二、表单文件上传的美化

看了地点多少个图片,能够明白原生的文书选择项样式是最中央的,首要体以往八个点:

无边框,与任何有边框的因素不对劲
慎选文件的按键样式太根基
分选多个文件后只展现总量,未展现详细选取的公文名
听闻多少个难点,能够按需对其进展美化

首先点能够向来抬高边框的样式

第二点要求扩张其余因素,能够大幅度增加一个按键(自行按需美化),将原来文本框隐蔽,用JS事件绑定,点击按键后模拟文件框的点击

<input type="file" name="userImage" id="userImage" style="display: none;">
<input type="button" id="" value="选择文件" onclick="document.getElementById('userImage').click()">

其三点与第二点雷同,也得增添新的成分,选用文件后,通过JS获取选拔的文本消息,并在新的要素中体现出来

想着相当的轻易,但随之而来的标题不怕,固然当选的文书数量众多,新成分占空间的多少正是个难题,能够暗中认可呈现多少个公文,再经过“查看更加多文件”查看见更加的多的音信

紧接着别的的主张是,二次性选中的文件过多,想收回有些文件时,又得重新选择。那未免太繁缛,所以需求提供及时删除某些选中文件的操作

三、选汉语件后的去除

要提供选普通话件后可去除的操作,就决然须求提供相关进口及脚本操作,上边围绕那一点来做些深入分析

1. 分界面的拍卖

澳门新萄京 3澳门新萄京 4

选用文件后,大家能够透过删除按键删除选中的公文,因为会并发多文件的事态,所以须要二个消息模版

<!-- 当前选择的文件列表 文件信息模版 -->
<script type="text/template" id="file-temp-item-tpl">

{{name}}
×

</script>

入选的文件豆蔻梢头多,就得再扩充一个下拉框做援助,最多彰显5个文件新闻,然后通过下拉开关张开下拉框(按键样式自行设定)

澳门新萄京 5

此处5个文件间的职位总括的不是很到位,首假诺这段代码,能够自行设定

// 计算每一项坐标left、占宽width
left = i === 0 ? 2 : 2   i * (100 / fileTempLen);
width = 100 / fileTempLen - 2;

下拉列表里面包车型客车每风华正茂项也是四个模板

  <!-- 查看更多文件 文件信息模版 -->
<script type="text/template" id="file-more-item-tpl">
<li>
{{name}}
×
</li>
</script>

以下为起头的HTML构造

 <form name="form" id="form" method="post" action="fileTest.php" enctype="multipart/form-data">
<!-- <input type="number" name="numberTest" value="100"> -->
<input type="file" name="fileTest[]" id="fileTest" multiple>
<!-- 当前选择的文件列表(最多显示5条) -->


<!-- 查看更多文件 -->
<ul class="item-more">
</ul>
<input type="button" class="btn btn-success" id="uploadBtn" value="上传">
<p class="upload-tip">文件上传成功</p>
</form>

以下为意气风发体CSS样式

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
  <style type="text/css">
    html {
      font-family: Arial;
    }
    form {
      margin: 50px auto;
      width: 400px;
    }
    input {
      width: 300px;
      padding: 4px;
    }
    #uploadBtn {
      margin-top: -3px;
      margin-left: 5px;
      width: 60px;
      height: 30px;
      font-weight: bold;
      font-size: 12px;
    }
    #fileTest {
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    .file-temp {
      position: relative;
      display: none;
      width: 300px;
      height: 31px;
    }
    .file-temp-item {
      position: absolute;
      top: 4px;
      height: 24px;
    }
    .item-more-btn {
      display: inline-block;
      position: absolute;
      top: 18px;
      right: 0.5%;
      width: 10px;
      height: 10px;
      color: #777;
      cursor: pointer;
    }
    .item-more-btn:hover {
      border-top-color: #aaa;
    }
    .file-temp-name {
      display: inline-block;
      overflow: hidden;
      width: 90%;
      height: 26px;
      padding: 2px 15px 2px 5px;
      border-radius: 2px;
      background-color: #eaeaf3;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .file-temp-btn {
      position: absolute;
      display: inline-block;
      top: 4px;
      right: 11%;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border: 1px solid #ddd;
      background-color: #ccc;
      border-radius: 50%;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
    }
    .item-more {
      position: absolute;
      overflow-y: auto;
      display: none;
      padding-left: 0;
      width: 300px;
      max-height: 150px;
      list-style: none;
    }
    .item-more li {
      position: relative;
      padding: 5px;
      border: 1px solid #ccc;
      border-top: none;
    }
    .item-more li:hover {
      background-color: #f5f5f9;
    }
    .file-item-more-name {
      display: inline-block;
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .file-item-more-btn {
      position: absolute;
      display: inline-block;
      top: 8px;
      right: 2%;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border: 1px solid #ddd;
      background-color: #ddd;
      border-radius: 50%;
      color: #fff;
      font-size: 18px;
      cursor: pointer;
    }
    .file-item-more-btn:hover {
      background-color: #ccc;
    }
    .upload-tip {
      display: none;
      margin: 50px auto;
      text-align: center;
      font-size: 12px;
    }
  </style>

2. 剧本的拍卖

下边,注重介绍JS脚本的拍卖

要获取到当选文件的音信,自然想到用value属性,但因而文件项的value只好取获得一个文件路线(第一个),无论有未有multiple

无multiple

<input type="file" onchange="console.log(this.value);">

澳门新萄京 6

有multiple

<input type="file" multiple onchange="console.log(this.value);">

澳门新萄京 7

既是一直通过value获取不到独具入选的文书消息,只可以寻求其余渠道。

  1)FileList

获得选中的文书新闻,还是能够用FileList对象,那是在HTML5中新添的,每一个表单文件项都有个files属性,里边存款和储蓄那选中的文书的有个别新闻

<input type="file" multiple onchange="console.log(this.files);">

选中七个公文后,查看文件音信

澳门新萄京 8

FileList对象看起来是个类数组,有length属性。所以大家相应能够经过退换或删除相关的项来自定义我们选取的公文(注意其实那是无法校订的,且三番四回看下来)

只要小编选取了多个公文,想删除第二项目,使用splice删除,则

<input type="file" multiple onchange="console.log(Array.prototype.splice.call(this.files, 1, 1));">

澳门新萄京 9

报错,由此可以知道FileList的length属性是只读的,那直接改造为可写可安顿呢

Object.defineProperty(FileList.prototype, 'length', {
writable: true,
configurable: true
});

配置之后length能修正了,乍生龙活虎看还感到splice生效了,不过输出豆蔻梢头看,FileList对象内容不改变,仍然是两项

翻看了一些素材后,理解到浏览器为了安全性的思虑,把FileList对象的剧情设为了不可更改,只可以够手动置空,但不能够更正内容

澳门新萄京 10

澳门新萄京 11

因此,解决办法是,新增添二个数组,起始复制FileList对象的文书内容,之后的纠正操作则通过那个可改革的数组进行

// 存储更新所选文件
var curFiles = []; 
...
// 选中文件后
var files = this.files;
if (files && files.length) {
// 原始FileList对象不可更改,所以将其赋予curFiles提供接下来的修改
Array.prototype.push.apply(curFiles, files);
}

如果点击了删减叉叉,能够一向更新文件新闻数组

var name = $(this).prev().text();
// 去除该文件
curFiles = curFiles.filter(function(file) {
return file.name !== name;
});

那样一来,更新文件信息的难点得到缓慢解决,然后即可举办文件的上传了

点击文件上传,假如一直调用$form.submit(卡塔尔; 则上传的文书音信照旧是开端的FileList对象,达不到大家自定义的渴求,所以要求用Ajax提交

那正是说,该怎么想后台提供一个文件对象啊?

  2)FormData

HTML5引进了表单的新目的FormData, 它能够生成多少个表单对象,大家得以向里面获得/设置键值对消息,再生机勃勃并交由给后台

引用MDN的FormData使用方法,大家能够增加各连串型的多少,使用ajax提交

var oMyForm = new FormData();
oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"
// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);
var oFileBody = '<a id="a"><b id="b">hey!</b></a>'; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});
oMyForm.append("webmasterfile", oBlob);
var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

也可使用JQ的包装的ajax,可是要在意设置processData和contentType属性为false,幸免JQ胡乱深入解析文件格式

var fd = new FormData(document.getElementById("fileinfo")); // 使用某个表单作为初始项
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false // 告诉jQuery不要去设置Content-Type请求头
});

此地有多少个要小心的点:

1)FormData中的属性值接纳的是单个文件音信,不能够是复合性的对象。大概表意不明,且看

var fd = new FormData($('#form')[0]);
fd.append('myFileTest', curFiles);
$files = $_REQUEST['myFileTest'];
var_dump($files);

用PHP接纳传过来的数额,数据却被一向转变到字符串了,非文件对象

澳门新萄京 12

curFiles是文件对象,那PHP端是还是不是理所应当用$_FILES来选拔信息吗,试试换来$files = $_FILES['myFileTest'];

直接出标题了,表达不可能这么管理,需求将curFiles内容大器晚成项一项拆开,即单个文件音讯

var fd = new FormData($('#form')[0]);
for (var i = 0, j = curFiles.length; i < j;   i) {
fd.append('myFileTest[]', curFiles[i]);
}
$files = $_FILES['myFileTest'];
var_dump($files);

澳门新萄京 13

文件吸收接纳成功,接下去就足以按需进行理文件件的操作了

2)后端获取文件新闻的时候,是直接通过原始$_FILES获取的,别的日常的消息才用$_REQUEST获取

换成$files = $_REQUEST['myFileTest'];试试,间接就是现身找不到myFileTest的标题

尝试增多日常的文书再提交

var fd = new FormData($('#form')[0]);
for (var i = 0, j = curFiles.length; i < j;   i) {
fd.append('myFileTest[]', curFiles[i]);
}
fd.append('myTest', [1, 2, 3]);
$files = $_FILES['myFileTest'];
$test = $_REQUEST['myTest'];
var_dump($test);
var_dump($files);

澳门新萄京 14

3)若是急需multiple的多文本上传,则须要在文件项的文书后增加[]号,表示那是三个多文件的数组,以供后端管理深入剖析

fd.append('myFileTest[]', curFiles[i]);

生机勃勃旦未有后边的[],则连接的append会直接覆盖原本的,最终后端获取到的只是最终append进去的项

4)不要直接在JQ的ajax中实例化出多个FormData对象,会出标题

澳门新萄京 15

直接在data属性中生成FormData对象,会被JQ忽视,所现在端什么消息也拿不到

混合表单项简单的例子:

在表单管理中,相当多时候大家会进行理文件件上传和此外底工项的交给,轻易地多加叁个input项目,看看是还是不是管理成功

<input type="number" name="numberTest" value="100">

澳门新萄京 16

<?php
$files = $_FILES['myFileTest'];
$test = $_REQUEST['numberTest'];
echo json_encode(array(
'len' => count($files['name']),
'num' => $test
));
?>

澳门新萄京 17

以下为后生可畏体的JS脚本:

<script type="text/javascript">
/**
* 向文件列表元素中添加相应的文件项
* @param {Array} files 当前的文件列表数组对象
*/
function addItem(files) {
var fileTempItemTpl = $('#file-temp-item-tpl').html(),
fileMoreItemTpl = $('#file-more-item-tpl').html()
htmlTemp = [],
htmlMoreTemp = [],
// 文件列表中各文件坐标位置及所占空间
left = 2,
width = 100,
// 最多取前5个文件
fileTempLen = files.length > 5 ? 5 : files.length;
for (var i = 0, j = files.length; i < j;   i) {
// 当i > 4,即第6个文件开始
if (i > 4) {
htmlMoreTemp.push(fileMoreItemTpl.replace('{{name}}', files[i].name));
continue;
}
// 计算每一项坐标left、占宽width
left = i === 0 ? 2 : 2   i * (100 / fileTempLen);
width = 100 / fileTempLen - 2;
htmlTemp.push(fileTempItemTpl
.replace('{{style}}', 'left: '   left   '%;width: '   width   '%;')
.replace('{{name}}', files[i].name)
);
}
// 渲染相关元素内容
$('.file-temp').html(''
  '<input type="text" style="background-color:#fff;" class="form-control" id="fileTemp" readonly>'
  htmlTemp.join('')
  (files.length > 5
? '='
: ''
)
);
$('.item-more').html(htmlMoreTemp.join(''));
}
// 保存当前选择的(更新后)文件列表
var curFiles = [];
// 初始选择文件时触发
$('#fileTest').change(function() {
var $this = $(this),
$temp = $('.file-temp'),
files = this.files;
if (files && files.length) {
// 原始FileList对象不可更改,所以将其赋予curFiles提供接下来的修改
Array.prototype.push.apply(curFiles, files);
addItem(curFiles);
$this.hide();
$temp.css('display', 'inline-block');
}
});
$(document)
// 取消选择某个文件时,在文件列表数组对象中删除这个值,并更新列表
.on('click', '.file-temp-btn, .file-item-more-btn', function() {
$('.upload-tip').hide();
var name = $(this).prev().text();
// 去除该文件
curFiles = curFiles.filter(function(file) {
return file.name !== name;
});
// 文件列表数组对象长度大于5才显示“更多文件列表”下拉项
if (curFiles.length <= 5) {
$('.item-more').hide();
}
// 文件列表数组被清空则重置文件选择表单项
if (!curFiles.length) {
$('#fileTest').val('').show();
$('.file-temp').css('display', 'none');
} else {
addItem(curFiles);
}
console.log(curFiles)
})
// 显示“更多文件列表”下拉项
.on('click', '.item-more-btn', function() {
$('.upload-tip').hide();
$('.item-more').show('normal');
});
// 上传操作
$('#uploadBtn').click(function() {
$('.upload-tip').hide();
// 构建FormData对象
var fd = new FormData($('#form')[0]);
for (var i = 0, j = curFiles.length; i < j;   i) {
fd.append('myFileTest[]', curFiles[i]);
}
$.ajax({
url: 'fileTest.php',
type: 'post',
data: fd,
processData: false,
contentType: false,
success: function(rs) {
rs = JSON.parse(rs);
$('.upload-tip')
.addClass('text-success')
.removeClass('text-error')
.text(rs.len   '个文件上传成功, number项值为'   rs.num)
.show();
},
error: function(err) {
}
});
});
</script>

上述所述是作者给我们介绍的JS实现表单多文本上传样式美化扶助选粤语件后去除相关项,希望对我们有所援救,假设大家有此外疑问请给本身留言,笔者会及时回复大家的。在那也极度多谢我们对帮客之家网站的援救!

开拓中会平常提到到文件上传的必要,根据作业不相同的急需,有不...

表单多文本上传样式美化 && 协助选中文件后去除相关项,文件上传样式美化

 

开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况。
有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善。

 

正文根据一个事例,对多文件的上传样式做了一些轻巧的美化(其实也没怎么美化。。),同期辅助选用文件后自定义删除相关的文书,最终再上传

文章篇幅较长,先轻松看看图示:

澳门新萄京 18

目录

  • 文本上传底蕴
    • 单文件上传
    • 多文本上传
  • 表单文件上传的美化
  • 当选文件后的删除
    • 分界面包车型客车管理
    • 本子的拍卖
      • FileList
      • FormData

有大约的单文件上传,有多文件上传,因浏览器原生的公文上传样式及效果的支持度不算太高,超级多时候我们会对体制实行美化,对效果拓宽宏观。

 

本文依照二个例子,对多文本的上传样式做了一些粗略的吹捧,相同的时候襄辅助选举用文件后自定义删除相关的公文,最终再上传

生龙活虎、文件上传幼功

小说篇幅较长,先简单看看图示:

1. 单文本上传

最轻松易行的公文上传,是单文件上传,form标签中参预enctype="multipart/form-data",form表单中有一个input[type="file"]项

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
    <input type="text" name="user" id="user" placeholder="请输入昵称">
    <input type="file" name="userImage" id="userImage">
    <input type="submit" name="sub" value="提交">
</form>

澳门新萄京 19

生龙活虎、文件上传幼功

2. 多文件上传

1. 单文件上传

  1)形似单文件上传,轻巧的多文件上传其实正是多多少个input[type="file"]项

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
    <input type="text" name="user" id="user" placeholder="请输入昵称">
    <input type="file" name="userImage1" id="userImage1">
    <input type="file" name="userImage2" id="userImage2">
    <input type="file" name="userImage3" id="userImage3">
    <input type="submit" name="sub" value="提交">
</form>

澳门新萄京 20

 

最简便的文书上传,是单文件上传,form标签中踏向enctype="multipart/form-data",form表单中有二个input[type="file"]项

  2卡塔尔(英语:State of Qatar) HTML5为表单文件项新添了二个multiple属性,能够安装达成选拔四个文本,如

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">
    <input type="text" name="user" id="user" placeholder="请输入昵称">
    <input type="file" name="userImage" id="userImage" multiple>
    <input type="submit" name="sub" value="提交">
</form>

澳门新萄京 21

 

2. 多文本上传

二、表单文件上传的吹捧

看了上面多少个图片,能够清楚原生的文本选用途样式是最宗旨的,首要反映在八个点:

遵照几个难点,能够按需对其进展美化

率先点可以直接助长边框的体制

第二点供给扩大别的因素,能够大幅度增涨二个按钮(自行按需美化),将原始文本框隐讳,用JS事件绑定,点击按键后模拟文件框的点击

<input type="file" name="userImage" id="userImage" style="display: none;">
<input type="button" id="" value="选择文件" onclick="document.getElementById('userImage').click()">

澳门新萄京JS实现表单多文件上传样式美化支持选中文件后删除相关项,文件上传样式美化。其三点与第二点肖似,也得加多新的因素,选用文件后,通过JS获取选择的文件音信,并在新的因素中展现出来

想着异常的粗略,但随之而来的主题素材就算,假如当选的公文数量过多,新成分占空间的有一点点正是个难题,能够暗许展现多少个文本,再经过“查看更多文本”查见到更加多的音讯

紧接着其余的主张是,叁遍性选中的文本过多,想收回有些文件时,又得重复选拔。这未免太繁缛,所以须求提供及时删除某些选中文件的操作

 

1)相像单文件上传,轻便的多文件上传其实正是多多少个input[type="file"]项

三、选中文件后的去除

要提供选中文件后可去除的操作,就一定必要提供有关进口及脚本操作,上边围绕那一点来做些剖析

2卡塔尔 HTML5为表单文件项新增加了一个multiple属性,能够安装完结选用三个文件,如

1. 分界面包车型客车拍卖

澳门新萄京 22澳门新萄京 23

选取文件后,大家能够通过删除按键删除选中的文书,因为会现出多文件的情景,所以需求贰个信息模版

  <!-- 当前选择的文件列表 文件信息模版 -->
    <script type="text/template" id="file-temp-item-tpl">

            {{name}}
            &times;

    </script>

入选的文本黄金年代多,就得再扩张三个下拉框做协助,最多显示5个文件信息,然后经过下拉开关展开下拉框(开关样式自行设定)

澳门新萄京 24

这里5个文件间的岗位总计的不是很到位,首就算这段代码,能够自行设定

// 计算每一项坐标left、占宽width
left = i === 0 ? 2 : 2   i * (100 / fileTempLen);
width = 100 / fileTempLen - 2;

下拉列表里面包车型大巴每风流倜傥项也是一个模板

  <!-- 查看更多文件 文件信息模版 -->
    <script type="text/template" id="file-more-item-tpl">
        <li>
            {{name}}
            &times;
        </li>
    </script>

以下为最初的HTML布局

  <form name="form" id="form" method="post" action="fileTest.php" enctype="multipart/form-data">
        <!-- <input type="number" name="numberTest" value="100"> -->
        <input type="file" name="fileTest[]" id="fileTest" multiple>
        <!-- 当前选择的文件列表(最多显示5条) -->


        <!-- 查看更多文件 -->
        <ul class="item-more">
        </ul>
        <input type="button" class="btn btn-success" id="uploadBtn" value="上传">
        <p class="upload-tip">文件上传成功</p>
    </form>

以下为全部CSS样式

澳门新萄京 25 1 <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 2 <style type="text/css"> 3 html { 4 font-family: Arial; 5 } 6 7 form { 8 margin: 50px auto; 9 width: 400px; 10 } 11 12 input { 13 width: 300px; 14 padding: 4px; 15 } 16 17 #uploadBtn { 18 margin-top: -3px; 19 margin-left: 5px; 20 width: 60px; 21 height: 30px; 22 font-weight: bold; 23 font-size: 12px; 24 } 25 26 #fileTest { 27 display: inline-block; 28 border: 1px solid #ccc; 29 border-radius: 3px; 30 } 31 32 .file-temp { 33 position: relative; 34 display: none; 35 width: 300px; 36 height: 31px; 37 } 38 39 .file-temp-item { 40 position: absolute; 41 top: 4px; 42 height: 24px; 43 } 44 45 .item-more-btn { 46 display: inline-block; 47 position: absolute; 48 top: 18px; 49 right: 0.5%; 50 width: 10px; 51 height: 10px; 52 color: #澳门新萄京,777; 53 cursor: pointer; 54 } 55 56 .item-more-btn:hover { 57 border-top-color: #aaa; 58 } 59 60 .file-temp-name { 61 display: inline-block; 62 overflow: hidden; 63 width: 90%; 64 height: 26px; 65 padding: 2px 15px 2px 5px; 66 border-radius: 2px; 67 background-color: #eaeaf3; 68 text-overflow: ellipsis; 69 white-space: nowrap; 70 } 71 .file-temp-btn { 72 position: absolute; 73 display: inline-block; 74 top: 4px; 75 right: 11%; 76 width: 18px; 77 height: 18px; 78 line-height: 18px; 79 text-align: center; 80 border: 1px solid #ddd; 81 background-color: #ccc; 82 border-radius: 50%; 83 color: #fff; 84 font-size: 18px; 85 cursor: pointer; 86 } 87 88 .item-more { 89 position: absolute; 90 overflow-y: auto; 91 display: none; 92 padding-left: 0; 93 width: 300px; 94 max-height: 150px; 95 list-style: none; 96 } 97 98 .item-more li { 99 position: relative; 100 padding: 5px; 101 border: 1px solid #ccc; 102 border-top: none; 103 } 104 .item-more li:hover { 105 background-color: #f5f5f9; 106 } 107 108 .file-item-more-name { 109 display: inline-block; 110 width: 90%; 111 overflow: hidden; 112 text-overflow: ellipsis; 113 white-space: nowrap; 114 } 115 .file-item-more-btn { 116 position: absolute; 117 display: inline-block; 118 top: 8px; 119 right: 2%; 120 width: 18px; 121 height: 18px; 122 line-height: 18px; 123 text-align: center; 124 border: 1px solid #ddd; 125 background-color: #ddd; 126 border-radius: 50%; 127 color: #fff; 128 font-size: 18px; 129 cursor: pointer; 130 } 131 .file-item-more-btn:hover { 132 background-color: #ccc; 133 } 134 135 .upload-tip { 136 display: none; 137 margin: 50px auto; 138 text-align: center; 139 font-size: 12px; 140 } 141 </style> View Code

 

二、表单文件上传的美化

2. 本子的拍卖

上边,重视介绍JS脚本的拍卖

要得到到当选文件的音讯,自然想到用value属性,但因此文件项的value只好取获得八个文本路线(第八个),无论有未有multiple

无multiple

<input type="file" onchange="console.log(this.value);">

澳门新萄京 26

有multiple

<input type="file" multiple onchange="console.log(this.value);">

澳门新萄京 27

 

既然向来通过value获取不到持有入选的文书消息,只好寻求别的门路。

 

  1)FileList

获得选中的文书音讯,还足以用FileList对象,那是在HTML5中新扩展的,每一个表单文件项都有个files属性,里边存款和储蓄这选中的文书的大器晚成部分音信

<input type="file" multiple onchange="console.log(this.files);">

选中七个公文后,查看文件音信

澳门新萄京 28

FileList对象看起来是个类数组,有length属性。所以大家应该能够经过改换或删除相关的项来自定义大家采取的公文(注意其实那是无法改良的,且三番一次看下来)

只要本身选取了五个公文,想删除第二种类,使用splice删除,则

<input type="file" multiple onchange="console.log(Array.prototype.splice.call(this.files, 1, 1));">

澳门新萄京 29

报错,因此可见FileList的length属性是只读的,这直接改正为可写可铺排呢

Object.defineProperty(FileList.prototype, 'length', {
    writable: true,
    configurable: true
});

布置之后length能改改了,乍黄金年代看还认为splice生效了,不过输出生龙活虎看,FileList对象内容不改变,仍然为两项

翻看了某个资料后,领悟到浏览器为了安全性的思索,把FileList对象的剧情设为了不可改造,只可以够手动置空,但不可能改良内容

澳门新萄京 30

澳门新萄京 31

因而,肃清办法是,新扩大二个数组,起头复制FileList对象的文本内容,之后的改换操作则通过那个可改革的数组进行

// 存储更新所选文件
var curFiles = []; 
...

// 选中文件后

var files = this.files;

if (files && files.length) {
    // 原始FileList对象不可更改,所以将其赋予curFiles提供接下来的修改
    Array.prototype.push.apply(curFiles, files);
}

若果点击了剔除叉叉,能够间接更新文件新闻数组

var name = $(this).prev().text();
// 去除该文件
curFiles = curFiles.filter(function(file) {
    return file.name !== name;
});

那样一来,更新文件消息的标题获得解决,然后就足以开展文件的上传了

 

点击文件上传,即使一向调用$form.submit(卡塔尔(قطر‎; 则上传的文本消息依然是发端的FileList对象,达不到大家自定义的必要,所以必要用Ajax提交

那么,该怎么想后台提供贰个文本对象呢?

 

  2)FormData

HTML5引进了表单的新对象FormData, 它能够生成二个表单对象,大家能够向里面赢得/设置键值对新闻,再生机勃勃并付出给后台

援引MDN的FormData使用格局,大家得以增多各类别型的多寡,使用ajax提交

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);

var oFileBody = '<a id="a"><b id="b">hey!</b></a>'; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});

oMyForm.append("webmasterfile", oBlob);

var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

也可利用JQ的包裹的ajax,但是要留意设置processData和contentType属性为false,幸免JQ胡乱拆解深入分析文件格式

var fd = new FormData(document.getElementById("fileinfo")); // 使用某个表单作为初始项
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // 告诉jQuery不要去处理发送的数据
  contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});

 

此间有几个要专一的点:

1)FormData中的属性值选择的是单个文件音讯,不能是复合性的靶子。可能表意不明,且看

var fd = new FormData($('#form')[0]);
fd.append('myFileTest', curFiles);

$files = $_REQUEST['myFileTest'];
var_dump($files);

用PHP选取传过来的数据,数据却被一直转变来字符串了,非文件对象

澳门新萄京 32

curFiles是文本对象,那PHP端是还是不是相应用$_FILES来选择信息吗,试试换成$files = $_FILES['myFileTest'];

间接出标题了,表明不能够如此处理,必要将curFiles内容生机勃勃项意气风发项拆开,即单个文件消息

var fd = new FormData($('#form')[0]);
for (var i = 0, j = curFiles.length; i < j;   i) {
    fd.append('myFileTest[]', curFiles[i]);
}

$files = $_FILES['myFileTest'];
var_dump($files);

澳门新萄京 33

文件吸收接纳成功,接下去就足以按需举办文件的操作了

 

2)后端获取文件音信的时候,是平素通过原始$_FILES获取的,别的平日的音信才用$_REQUEST获取

澳门新萄京JS实现表单多文件上传样式美化支持选中文件后删除相关项,文件上传样式美化。换成$files = $_REQUEST['myFileTest'];试试,直接就是出新找不到myFileTest的主题素材

探寻增加日常的文本再交由

var fd = new FormData($('#form')[0]);
for (var i = 0, j = curFiles.length; i < j;   i) {
    fd.append('myFileTest[]', curFiles[i]);
}

fd.append('myTest', [1, 2, 3]);

$files = $_FILES['myFileTest'];
$test = $_REQUEST['myTest'];
var_dump($test);
var_dump($files);

澳门新萄京 34

 

3)假若须要multiple的多文本上传,则要求在文件项的公文后增多[]号,表示那是三个多文件的数组,以供后端处理深入解析

fd.append('myFileTest[]', curFiles[i]);

要是未有前面包车型地铁[],则三番五次的append会直接覆盖原本的,最终后端获取到的只是终极append进去的项

 

4)不要一向在JQ的ajax中实例化出一个FormData对象,会出标题

澳门新萄京 35

直白在data属性中生成FormData对象,会被JQ忽视,所未来端什么音讯也拿不到

 

混合表单项简单的例子:

在表单管理中,超级多时候大家会进展文件上传和任何幼功项的交由,简单地多加三个input项目,看看是或不是管理成功

<input type="number" name="numberTest" value="100">

澳门新萄京 36

<?php
    $files = $_FILES['myFileTest'];
    $test = $_REQUEST['numberTest'];

    echo json_encode(array(
        'len' => count($files['name']),
        'num' => $test
    ));

?>

澳门新萄京 37

 

以下为总体的JS脚本:

澳门新萄京 38 1 <script type="text/javascript"> 2 /** 3 * 向文件列表成分中增多相应的文本项 4 * @param {Array} files 当前的公文列表数组对象 5 */ 6 function addItem(files) { 7 var fileTempItemTpl = $('#file-temp-item-tpl').html(), 8 fileMoreItemTpl = $('#file-more-item-tpl').html() 9 htmlTemp = [], 10 htmlMoreTemp = [], 11 // 文件列表中各文件坐标地方及所占空间 12 left = 2, 13 width = 100, 14 // 最多取前5个文件 15 fileTempLen = files.length > 5 ? 5 : files.length; 16 17 for (var i = 0, j = files.length; i < j; i卡塔尔 { 18 // 当i > 4,即第6个公文带头 19 if (i > 4卡塔尔 { 20 htmlMoreTemp.push(fileMoreItemTpl.replace('{{name}}', files[i].name卡塔尔(英语:State of Qatar)卡塔尔国; 21 continue; 22 } 23 24 // 总计每黄金时代项坐标left、占宽width 25 left = i === 0 ? 2 : 2 i * (100 / fileTempLen); 26 width = 100 / fileTempLen - 2; 27 28 htmlTemp.push(fileTempItemTpl 29 .replace('{{style}}', 'left: ' left '%;width: ' width '%;') 30 .replace('{{name}}', files[i].name卡塔尔(英语:State of Qatar) 31 卡塔尔国; 32 } 33 34 // 渲染相关要素内容 35 $('.file-temp'卡塔尔.html('' 36 '<input type="text">' 37 htmlTemp.join(''卡塔尔(英语:State of Qatar) 38 (files.length > 5 39 ? '<span class="item-more-btn" title="查看更加多">=</span>' 40 : '' 41 )42 卡塔尔国; 43 44 $('.item-more'卡塔尔(英语:State of Qatar).html(htmlMoreTemp.join(''卡塔尔(قطر‎卡塔尔国; 45 } 46 47 // 保存当前选用的(更新后)文件列表 48 var curFiles = []; 49 50 // 领头接收文件时触发 51 $('#fileTest'卡塔尔国.change(function(卡塔尔(قطر‎ { 52 var $this = $(this卡塔尔, 53 $temp = $('.file-temp'卡塔尔, 54 files = this.files; 55 56 if (files && files.length卡塔尔(قطر‎ { 57 // 原始FileList对象不可改换,所以将其授予curFiles提供接下去的退换 58 Array.prototype.push.apply(curFiles, files卡塔尔国; 59 addItem(curFiles卡塔尔(قطر‎; 60 61 $this.hide(卡塔尔(قطر‎; 62 $temp.css('display', 'inline-block'卡塔尔; 63 } 64 }卡塔尔(قطر‎; 65 66 $(document卡塔尔国 67 // 废除选取有些文件时,在文书列表数组对象中剔除这几个值,并立异列表 68 .on('click', '.file-temp-btn, .file-item-more-btn', function(卡塔尔国 { 69 $('.upload-tip'卡塔尔(英语:State of Qatar).hide(卡塔尔国; 70 var name = $(this卡塔尔(قطر‎.prev(卡塔尔.text(卡塔尔; 71 // 去除该公文 72 curFiles = curFiles.filter(function(file卡塔尔(英语:State of Qatar) { 73 return file.name !== name; 74 }卡塔尔国; 75 // 文件列表数组对象长度超越5才展现“越来越多文本列表”下拉项 76 if (curFiles.length <= 5卡塔尔(قطر‎ { 77 $('.item-more'卡塔尔(英语:State of Qatar).hide(卡塔尔; 78 } 79 // 文本列表数组被清空则重新设置文件接收表单项 80 if (!curFiles.length) { 81 $('#fileTest'卡塔尔(英语:State of Qatar).val(''卡塔尔(قطر‎.show(卡塔尔(قطر‎; 82 $('.file-temp'卡塔尔.css('display', 'none'卡塔尔; 83 } else { 84 addItem(curFiles卡塔尔(قطر‎; 85 } 86 87 console.log(curFiles卡塔尔国 88 }卡塔尔国 89 // 显示“更加多文本列表”下拉项 90 .on('click', '.item-more-btn', function(卡塔尔(英语:State of Qatar) { 91 $('.upload-tip'卡塔尔(قطر‎.hide(卡塔尔; 92 $('.item-more'卡塔尔(英语:State of Qatar).show('normal'卡塔尔(قطر‎; 93 }卡塔尔(英语:State of Qatar); 94 95 // 上传操作 96 $('#uploadBtn').click(function() { 97 $('.upload-tip').hide(); 98 99 // 构建FormData对象 100 var fd = new FormData($('#form')[0]); 101 for (var i = 0, j = curFiles.length; i < j; i) { 102 fd.append('myFileTest[]', curFiles[i]卡塔尔(قطر‎; 103 } 104 105 $.ajax({ 106 url: 'fileTest.php', 107 type: 'post', 108 data: fd, 109 processData: false, 110 contentType: false, 111 success: function(rs卡塔尔 { 112 rs = JSON.parse(rs卡塔尔国; 113 $('.upload-tip'卡塔尔(英语:State of Qatar) 114 .addClass('text-success'卡塔尔(قطر‎ 115 .removeClass('text-error'卡塔尔(قطر‎ 116 .text(rs.len '个文件上传成功, number项值为' rs.num卡塔尔 117 .show(卡塔尔(英语:State of Qatar); 118 }, 119 error: function(err卡塔尔(قطر‎ { 120 121 } 122 }卡塔尔; 123 }卡塔尔(英语:State of Qatar); 124 </script> View Code

 

后记:

除此以外,能够杜撰给文件上传扩充进程条

而当文件太大时,会因为后端扶持的最大文件size远远不够形成崩溃,当时能够杜撰进行断点续传

断点续传,前端能够通过二进制流和本地存款和储蓄的组成来落成,这里就非常的少说了

援辅助选举中文件后删除相关项,文件上传样式美化 开荒中会平日涉及到文件上传的供给,依照作业分歧的需要,有...

看了地点多少个图片,能够知晓原生的文本接纳项样式是最大旨的,主要体未来八个点:

无边框,与其它有边框的要素不投缘采取文件的按键样式太基本功接受多少个公文后只展示总的数量,未展现详细选择的文本名基于多少个难点,能够按需对其张开美化

先是点能够平素抬高边框的体制

其次点须求增加别的因素,能够猛增贰个开关,将原来文本框隐蔽,用JS事件绑定,点击开关后模拟文件框的点击

其三点与第二点相通,也得加多新的成分,接收文件后,通过JS获取接收的文件新闻,并在新的因素中显得出来

想着相当的粗略,但随之而来的主题素材就算,要是当选的公文数量超级多,新成分占空间的稍微正是个难题,能够暗中认可呈现几个文件,再经过“查看越多文件”查看见越来越多的音讯

随之别的的想法是,二次性选中的文件过多,想收回有个别文件时,又得重复选取。那未免太冗杂,所以供给提供及时删除有个别选中文件的操作

三、选中文件后的删减

要提供选汉语件后可去除的操作,就势应当要提供相关进口及脚本操作,上边围绕这一点来做些分析

1. 分界面包车型地铁拍卖

慎选文件后,大家得以由此删除开关删除选中的文件,因为会不能自已多文本的情状,所以必要三个消息模版

&lt;span style="{{style}}"&gt;&lt;span &gt;{{name}}&lt;/span&gt;&lt;span &gt;&amp;times;&lt;/span&gt;&lt;/span&gt;

入选的文本大器晚成多,就得再扩充三个下拉框做扶助,最多展现5个文本新闻,然后通过下拉开关张开下拉框

此地5个文件间的位置总计的不是很到位,主如果这段代码,能够自行设定

// 计算每一项坐标left、占宽widthleft = i === 0 ? 2 : 2   i * ;width = 100 / fileTempLen - 2;

下拉列表里面包车型地铁每生机勃勃项也是贰个模板

 &lt;li&gt;&lt;span &gt;{{name}}&lt;/span&gt;&lt;span &gt;&amp;times;&lt;/span&gt;&lt;/li&gt;

以下为开端的HTML构造

  html { font-family: Arial; } form { margin: 50px auto; width: 400px; } input { width: 300px; padding: 4px; } #uploadBtn { margin-top: -3px; margin-left: 5px; width: 60px; height: 30px; font-weight: bold; font-size: 12px; } #fileTest { display: inline-block; border: 1px solid #ccc; border-radius: 3px; } .file-temp { position: relative; display: none; width: 300px; height: 31px; } .file-temp-item { position: absolute; top: 4px; height: 24px; } .item-more-btn { display: inline-block; position: absolute; top: 18px; right: 0.5%; width: 10px; height: 10px; color: #777; cursor: pointer; } .item-more-btn:hover { border-top-color: #aaa; } .file-temp-name { display: inline-block; overflow: hidden; width: 90%; height: 26px; padding: 2px 15px 2px 5px; border-radius: 2px; background-color: #eaeaf3; text-overflow: ellipsis; white-space: nowrap; } .file-temp-btn { position: absolute; display: inline-block; top: 4px; right: 11%; width: 18px; height: 18px; line-height: 18px; text-align: center; border: 1px solid #ddd; background-color: #ccc; border-radius: 50%; color: #fff; font-size: 18px; cursor: pointer; } .item-more { position: absolute; overflow-y: auto; display: none; padding-left: 0; width: 300px; max-height: 150px; list-style: none; } .item-more li { position: relative; padding: 5px; border: 1px solid #ccc; border-top: none; } .item-more li:hover { background-color: #f5f5f9; } .file-item-more-name { display: inline-block; width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-item-more-btn { position: absolute; display: inline-block; top: 8px; right: 2%; width: 18px; height: 18px; line-height: 18px; text-align: center; border: 1px solid #ddd; background-color: #ddd; border-radius: 50%; color: #fff; font-size: 18px; cursor: pointer; } .file-item-more-btn:hover { background-color: #ccc; } .upload-tip { display: none; margin: 50px auto; text-align: center; font-size: 12px; } 

2. 剧本的拍卖

上面,器重介绍JS脚本的管理

要拿走到当选文件的音信,自然想到用value属性,但透过文件项的value只好获得到叁个文书路线,无论有未有multiple

既然如此一向通过value获取不到独具入选的文件音信,只好寻求别的路子。

1)FileList

获取选中的文书信息,还足以用FileList对象,那是在HTML5中新增添的,每种表单文件项都有个files属性,里边存款和储蓄那选中的公文的一些音讯

选中四个公文后,查看文件新闻

FileList对象看起来是个类数组,有length属性。所以大家理应能够通过更动或删除相关的项来自定义我们筛选的文本

倘使我选用了三个文本,想删除第二品种,使用splice删除,则

报错,由此可见FileList的length属性是只读的,那间接改革为可写可布署呢

Object.defineProperty(FileList.prototype, 'length', {writable: true,configurable: true});

安顿之后length能修正了,乍风流倜傥看还感到splice生效了,不过输出生龙活虎看,FileList对象内容不改变,仍然是两项

查阅了风姿洒脱部分材质后,精晓到浏览器为了安全性的虚构,把FileList对象的源委设为了不可退换,只可以够手动置空,但无法修正内容

所以,消亡办法是,新添三个数组,初步复制FileList对象的文本内容,之后的更正操作则通过那个可改良的数组实行

// 存储更新所选文件var curFiles = []; ...// 选中文件后var files = this.files;if (files && files.length) {// 原始FileList对象不可更改,所以将其赋予curFiles提供接下来的修改Array.prototype.push.apply;}

只要点击了剔除叉叉,能够一直更新文件音讯数组

var name = $;// 去除该文件curFiles = curFiles.filter {return file.name !== name;});

那样一来,更新文件新闻的主题材料获得消除,然后就足以拓宽文件的上传了

点击文件上传,假使直接调用$form.submit(卡塔尔(英语:State of Qatar); 则上传的文书音讯依旧是开首的FileList对象,达不到大家自定义的必要,所以须要用Ajax提交

那么,该怎么想后台提供多个文书对象啊?

2)FormData

HTML5引进了表单的新目的FormData, 它能够生成多少个表单对象,大家能够向在那之中拿到/设置键值对新闻,再大器晚成并交付给后台

援引MDN的FormData使用情势,我们能够增加各体系型的数目,使用ajax提交

var oMyForm = new FormData();oMyForm.append("username", "Groucho");oMyForm.append; // 数字123456被立即转换成字符串"123456"// fileInputElement中已经包含了用户所选择的文件oMyForm.append("userfile", fileInputElement.files[0]);var oFileBody = 'hey!'; // Blob对象包含的文件内容var oBlob = new Blob([oFileBody], { type: "text/xml"});oMyForm.append("webmasterfile", oBlob);var oReq = new XMLHttpRequest();oReq.open("POST", "http://foo.com/submitform.php");oReq.send;

也可接受JQ的包装的ajax,然而要潜心设置processData和contentType属性为false,幸免JQ胡乱剖判文件格式

var fd = new FormData(document.getElementById; // 使用某个表单作为初始项fd.append("CustomField", "This is some extra data");$.ajax({url: "stash.php",type: "POST",data: fd,processData: false, // 告诉jQuery不要去处理发送的数据contentType: false // 告诉jQuery不要去设置Content-Type请求头});

此地有多少个要小心的点:

1)FormData中的属性值采纳的是单个文件音讯,无法是复合性的指标。恐怕表意不明,且看

var fd = new FormData;fd.append('myFileTest', curFiles);$files = $_REQUEST['myFileTest'];var_dump;

用PHP选用传过来的多少,数据却被一向转变到字符串了,非文件对象

curFiles是文件对象,那PHP端是或不是应该用$_FILES来接纳新闻吗,试试换来$files = $_FILES['myFileTest'];

直接出标题了,表明不能够这么管理,供给将curFiles内容后生可畏项黄金时代项拆开,即单个文件音讯

var fd = new FormData;for (var i = 0, j = curFiles.length; i < j;   i) {fd.append('myFileTest[]', curFiles[i]);}$files = $_FILES['myFileTest'];var_dump;

文本吸收接纳成功,接下去就足以按需实行文件的操作了

2)后端获取文件音讯的时候,是从来通过原始$_FILES获取的,别的平时的音信才用$_REQUEST获取

换成$files = $_REQUEST['myFileTest'];试试,直接正是现身找不到myFileTest的难点

尝试加多经常的文书再交由

var fd = new FormData;for (var i = 0, j = curFiles.length; i < j;   i) {fd.append('myFileTest[]', curFiles[i]);}fd.append;$files = $_FILES['myFileTest'];$test = $_REQUEST['myTest'];var_dump;var_dump如果需要multiple的多文件上传,则需要在文件项的文件后添加[]号,表示这是一个多文件的数组,以供后端处理解析fd.append('myFileTest[]', curFiles[i]);

借使未有后边的[],则连年的append会直接覆盖原本的,最后后端获取到的只是最终append进去的项

4)不要向来在JQ的ajax中实例化出一个FormData对象,会出标题

向来在data属性中生成FormData对象,会被JQ忽视,所未来端什么音信也拿不到

混合表单项简单的例证:

在表单管理中,相当多时候大家交易会开文件上传和任何幼功项的交由,轻巧地多加贰个input项目,看看是不是处理成功

 count,'num' => $test));?>

以下为一切的JS脚本:

/*** &#21521;&#25991;&#20214;&#21015;&#34920;&#20803;&#32032;&#20013;&#28155;&#21152;&#30456;&#24212;&#30340;&#25991;&#20214;&#39033;* @param {Array} files &#24403;&#21069;&#30340;&#25991;&#20214;&#21015;&#34920;&#25968;&#32452;&#23545;&#35937;*/function addItem {var fileTempItemTpl = $('#file-temp-item-tpl').html(),fileMoreItemTpl = $('#file-more-item-tpl').html()htmlTemp = [],htmlMoreTemp = [],// &#25991;&#20214;&#21015;&#34920;&#20013;&#21508;&#25991;&#20214;&#22352;&#26631;&#20301;&#32622;&#21450;&#25152;&#21344;&#31354;&#38388;left = 2,width = 100,// &#26368;&#22810;&#21462;&#21069;5&#20010;&#25991;&#20214;fileTempLen = files.length &gt; 5 &amp;#63; 5 : files.length;for (var i = 0, j = files.length; i &lt; j;   i) {// &#24403;i &gt; 4&#65292;&#21363;&#31532;6&#20010;&#25991;&#20214;&#24320;&#22987;if  {htmlMoreTemp.push(fileMoreItemTpl.replace('{{name}}', files[i].name));continue;}// &#35745;&#31639;&#27599;&#19968;&#39033;&#22352;&#26631;left&#12289;&#21344;&#23485;widthleft = i === 0 &amp;#63; 2 : 2   i * ;width = 100 / fileTempLen - 2;htmlTemp.push(fileTempItemTpl.replace('{{style}}', 'left: '   left   '%;width: '   width   '%;').replace('{{name}}', files[i].name));}// &#28210;&#26579;&#30456;&#20851;&#20803;&#32032;&#20869;&#23481;$.html(''  '&lt;input type="text" style="background-color:#fff;" readonly&gt;'  htmlTemp.join  (files.length &gt; 5&amp;#63; '&lt;span title="&#26597;&#30475;&#26356;&#22810;"&gt;=&lt;/span&gt;': ''));$.html);}// &#20445;&#23384;&#24403;&#21069;&#36873;&#25321;&#30340;&#25991;&#20214;&#21015;&#34920;var curFiles = [];// &#21021;&#22987;&#36873;&#25321;&#25991;&#20214;&#26102;&#35302;&#21457;$.change {var $this = $,$temp = $,files = this.files;if (files &amp;&amp; files.length) {// &#21407;&#22987;FileList&#23545;&#35937;&#19981;&#21487;&#26356;&#25913;&#65292;&#25152;&#20197;&#23558;&#20854;&#36171;&#20104;curFiles&#25552;&#20379;&#25509;&#19979;&#26469;&#30340;&#20462;&#25913;Array.prototype.push.apply;addItem;$this.hide();$temp.css('display', 'inline-block');}});$// &#21462;&#28040;&#36873;&#25321;&#26576;&#20010;&#25991;&#20214;&#26102;&#65292;&#22312;&#25991;&#20214;&#21015;&#34920;&#25968;&#32452;&#23545;&#35937;&#20013;&#21024;&#38500;&#36825;&#20010;&#20540;&#65292;&#24182;&#26356;&#26032;&#21015;&#34920;.on('click', '.file-temp-btn, .file-item-more-btn', function.hide.prev;// &#21435;&#38500;&#35813;&#25991;&#20214;curFiles = curFiles.filter {return file.name !== name;});// &#25991;&#20214;&#21015;&#34920;&#25968;&#32452;&#23545;&#35937;&#38271;&#24230;&#22823;&#20110;5&#25165;&#26174;&#31034;&#8220;&#26356;&#22810;&#25991;&#20214;&#21015;&#34920;&#8221;&#19979;&#25289;&#39033;if  {$;}// &#25991;&#20214;&#21015;&#34920;&#25968;&#32452;&#34987;&#28165;&#31354;&#21017;&#37325;&#32622;&#25991;&#20214;&#36873;&#25321;&#34920;&#21333;&#39033;if  {$.show.css;} else {addItem;}console.log// &#26174;&#31034;&#8220;&#26356;&#22810;&#25991;&#20214;&#21015;&#34920;&#8221;&#19979;&#25289;&#39033;.on('click', '.item-more-btn', function.hide.show;// &#19978;&#20256;&#25805;&#20316;$.click {$;// &#26500;&#24314;FormData&#23545;&#35937;var fd = new FormData;for (var i = 0, j = curFiles.length; i &lt; j;   i) {fd.append('myFileTest[]', curFiles[i]);}$.ajax({url: 'fileTest.php',type: 'post',data: fd,processData: false,contentType: false,success: function {rs = JSON.parse.addClass.removeClass.text(rs.len   '&#20010;&#25991;&#20214;&#19978;&#20256;&#25104;&#21151;, number&#39033;&#20540;&#20026;'   rs.num).show();},error: function;

如上所述是笔者给大家介绍的JS完毕表单多文件上传样式美化扶植选中文件后去除相关项,希望对咱们有所支持,倘若大家有别的疑问请给自个儿留言,笔者会及时还原大家的。在这里也特别谢谢大家对剧本之家网址的支撑!

本文由澳门新萄京发布于服务器,转载请注明出处:澳门新萄京JS实现表单多文件上传样式美化支持选

上一篇:澳门新萄京:用法图文详解_javascript技巧_脚本之 下一篇:没有了
猜你喜欢
热门排行
精彩图文