【4858美高梅】表单多文件上传样式美化,JS达成表单多文本上传样式美化援救选中文件后删除相关项

By admin in 4858美高梅 on 2019年4月17日

 

 

JS完结表单多文件上传样式美化帮忙选汉语件后去除相关项,js文件上传

支出中会平日提到到文件上传的供给,依照业务分歧的必要,有例外的公文上传景况。

有简要的单文件上传,有多文件上传,因浏览器原生的文书上传样式及功效的接济度不算太高,大多时候大家会对体制进行美化,对效益拓展周到。

正文依照八个例证,对多文本的上传样式做了一部分简练的吹牛(其实也没怎么美化。。),同时帮忙选用文件后自定义删除相关的文件,最终再上传

作品篇幅较长,先轻便看看图示:

4858美高梅 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>

二. 多文本上传

  一)类似单文件上传,轻巧的多文件上传其实就是多多少个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>

  贰)
HTML伍为表单文件项新添了贰个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>

4858美高梅 2

2、表单文件上传的鼓吹

看了地点多少个图片,能够清楚原生的文件选取项样式是最核心的,首要反映在四个点:

无边框,与其余有边框的因素不对劲
选料文件的开关样式太基础
选择多少个文件后只显示总量,未出示详细选用的文件名
据他们说多少个难点,能够按需对其张开美化

第二点能够一直抬高边框的体制

其次点必要扩大别的因素,能够激增二个开关(自行按需美化),将原来文本框隐藏,用JS事件绑定,点击按键后模拟文件框的点击

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

其三点与第二点类似,也得增加新的要素,选取文件后,通过JS获取选用的文本新闻,并在新的因素中展现出来

想着很轻巧,但随之而来的标题正是,假设当选的文本数量过多,新成分占空间的多少正是个难点,能够私下认可展现几个文本,再经过“查看更多文本”查看到更加多的消息

进而其它的想法是,二次性选中的文件过多,想收回有个别文件时,又得重复选取。这未免太繁琐,所以须求提供即时删除有些选汉语件的操作

三、选中文件后的删除

【4858美高梅】表单多文件上传样式美化,JS达成表单多文本上传样式美化援救选中文件后删除相关项。要提供选汉语件后可去除的操作,就势必需求提供相关进口及脚本操作,上面围绕那一点来做些解析

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

4858美高梅 34858美高梅 4

分选文件后,咱们得以由此删除按键删除选中的文件,因为会现出多文本的情况,所以须求3个音信模版

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

{{name}}
×

</script>

入选的文本壹多,就得再扩充一个下拉框做协理,最多显示四个文件音讯,然后通过下拉按键打开下拉框(开关样式自行设定)

4858美高梅 5

此地伍个文件间的岗位计算的不是很到位,首固然那段代码,能够自行设定

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

下拉列表里面包车型地铁每1项也是多个模板

  <!-- 查看更多文件 文件信息模版 -->
<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>

二. 本子的处理

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

要获取到当选文件的音讯,自然想到用value属性,但经过文件项的value只可以得到到一个文本路线(第3个),无论有未有multiple

无multiple

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

4858美高梅 6

有multiple

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

4858美高梅 7

既然一直通过value获取不到全数入选的公文音信,只好寻求别的门路。

  1)FileList

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

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

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

4858美高梅 8

FileList对象看起来是个类数组,有length属性。所以大家应该能够通过修改或删除相关的项来自定义我们接纳的文书(注意其实那是不可能修改的,且继续看下来)

如果笔者选拔了五个公文,想删除第2连串,使用splice删除,则

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

4858美高梅 9

报错,因而可见FileList的length属性是只读的,这直接改变为可写可配备呢

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

布署之后length能改改了,乍1看还感到splice生效了,可是输出一看,FileList对象内容不改变,仍为两项

查看了有个别材质后,理解到浏览器为了安全性的思量,把FileList对象的剧情设为了不可改变,只可以够手动置空,但不可能修改内容

4858美高梅 10

4858美高梅 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接收传过来的数目,数据却被平素转变来字符串了,非文件对象

4858美高梅 12

curFiles是文本对象,那PHP端是否应有用$_FILES来选用消息吗,试试换到$files
= $_FILES[‘myFileTest’];

一向出标题了,表达不可能如此处理,必要将curFiles内容1项壹项拆开,即单个文件音讯

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);

4858美高梅 13

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

2)后端获取文件音讯的时候,是直接通过原始$_FILES获取的,别的1般的新闻才用$_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);

4858美高梅 14

三)要是急需multiple的多文件上传,则须求在文书项的公文后加多[]号,表示那是1个多文本的数组,以供后端处通晓析

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

若果未有前面包车型大巴[],则延续的append会直接覆盖原来的,最后后端获取到的只是最终append进去的项

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

4858美高梅 15

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

混合表单项轻便的事例:

在表单处理中,许多时候我们会开始展览文件上传和任何基础项的交由,轻松地多加2个input项目,看看是还是不是处理成功

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

4858美高梅 16

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

4858美高梅 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完毕表单多文本上传样式美化扶助选中文件后去除相关项,希望对大家全数支持,如若大家有任何疑问请给自家留言,作者会及时复苏大家的。在此也非凡多谢我们对帮客之家网址的支撑!

开垦中会通常提到到文件上传的急需,遵照作业不相同的急需,有不…

开荒中会平常提到到文件上传的急需,依据工作不一致的要求,有两样的文书上传景况。

支付中会平日提到到文件上传的须要,依据职业分歧的须要,有分化的公文上传境况。

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

支出中会平日涉及到文件上传的急需,依照职业差别的急需,有两样的文件上传情状。

有大约的单文件上传,有多文本上传,因浏览器原生的文件上传样式及功用的支撑度不算太高,繁多时候大家会对体制进行美化,对功用进行完善。

有大约的单文件上传,有多文件上传,因浏览器原生的公文上传样式及效率的支撑度不算太高,诸多时候大家会对体制进行美化,对效益拓展宏观。

 

 

本文依照贰个例子,对多文本的上传样式做了部分轻便的美化(其实也没怎么美化。。),同时帮忙选取文件后自定义删除相关的文书,最终再上传

正文依照二个事例,对多文件的上传样式做了1部分轻易易行的美化(其实也没怎么美化。。),同时协助选择文件后自定义删除相关的文书,最后再上传

正文依据一个事例,对多文件的上传样式做了有的大概的鼓吹(其实也没怎么美化。。),同时协助选择文件后自定义删除相关的文书,最终再上传

作品篇幅较长,先简单看看图示:

文章篇幅较长,先简单看看图示:

小说篇幅较长,先轻巧看看图示:

4858美高梅 18

4858美高梅 19

4858美高梅 20

一、文件上传基础

目录

目录

壹. 单文件上传

  • 文本上传基础
    • 单文件上传
    • 多文件上传
  • 表单文件上传的吹捧
  • 入选文件后的删除
    • 分界面包车型大巴处理
    • 本子的处理
      • FileList
      • FormData
  • 文件上传基础
    • 单文件上传
    • 多文本上传
  • 表单文件上传的美化
  • 当选文件后的去除
    • 分界面包车型客车处理
    • 本子的处理
      • FileList
      • FormData

最轻松易行的文本上传,是单文件上传,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>

壹、文件上传基础

一、文件上传基础

二. 多文书上传

一. 单文件上传

最简便的文书上传,是单文件上传,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>

4858美高梅 21

一. 单文本上传

最简便的文书上传,是单文件上传,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>

4858美高梅 22

  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>

  一)类似单文件上传,轻巧的多文本上传其实正是多多少个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>

4858美高梅 23

 

  一)类似单文件上传,简单的多文本上传其实正是多多少个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>

4858美高梅 24

 

  2)
HTML伍为表单文件项新扩张了一个multiple属性,能够安装完成采用多个公文,如

  二) 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>

4858美高梅 25

要小心的是,对于multiple这一个新属性,在IE玖及以下版本中不被帮助,在移动端安卓平台下会忽略,约等于不得不选拔二个文本

 

  二) HTML伍为表单文件项新添了一个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>

4858美高梅 26

要专注的是,对于multiple那一个新属性,在IE玖及以下版本中不被补助,在移动端安卓平台下会忽略,也正是不得不选用1个文书

 

<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>

二、表单文件上传的吹捧

看了上边多少个图片,能够知道原生的公文选拔项样式是最核心的,重要映以后八个点:

  1. 无边框,与别的有边框的成分不对劲
  2. 分选文件的按键样式太基础
  3. 选拔多少个公文后只展现总量,未呈现详细选择的文件名

遵照多少个难点,能够按需对其开始展览美化

首先点能够平素抬高边框的体裁

第一点要求扩张别的因素,能够激增叁个按键(自行按需美化),将本来文本框隐藏,用JS事件绑定,点击按键后模拟文件框的点击

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

其三点与第三点类似,也得添加新的因素,选取文件后,通过JS获取选用的公文音讯,并在新的要素中显得出来

想着相当粗略,但随之而来的主题材料固然,借使当选的文件数量大多,新成分占空间的有点便是个难题,能够暗中认可彰显多少个公文,再经过“查看更加多文本”查看到愈来愈多的音信

紧接着别的的想法是,二回性选中的公文过多,想收回有些文件时,又得重新选拔。那未免太繁琐,所以需求提供即时删除有个别选普通话件的操作

 

2、表单文件上传的吹牛

看了地方多少个图片,能够领略原生的文本选取项样式是最基本的,重要反映在多个点:

  1. 无边框,与其它有边框的要素不投缘
  2. 挑选文件的按键样式太基础
  3. 分选几个文本后只显示总量,未彰显详细选拔的公文名

遵照多少个难点,能够按需对其开始展览美化

率先点可以平素抬高边框的体裁

其次点须要扩展别的因素,可以激增三个按键(自行按需美化),将原有文本框隐藏,用JS事件绑定,点击按键后模拟文件框的点击

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

其3点与第1点类似,也得增多新的要素,采用文件后,通过JS获取选择的文件音讯,并在新的因素中展现出来

想着很简短,但随之而来的标题不怕,假使当选的文书数量众多,新成分占空间的有个别就是个难题,能够默许展现几个文本,再经过“查看更加多文件”查看到更加多的音讯

进而此外的想法是,一遍性选中的文本过多,想收回有个别文件时,又得重新接纳。那未免太繁琐,所以供给提供及时删除某些选中文件的操作

 

4858美高梅 27

3、选粤语件后的删减

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

3、选普通话件后的删减

要提供选普通话件后可去除的操作,就断定必要提供相关进口及脚本操作,下边围绕这一点来做些解析

贰、表单文件上传的美化

壹. 分界面包车型大巴处理

4858美高梅 284858美高梅 29

分选文件后,大家能够通过删除开关删除选中的文书,因为会产出多文件的事态,所以需求四个新闻模版

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

            {{name}}
            &times;

    </script>

当选的公文1多,就得再增加八个下拉框做协理,最多展现5个文本音信,然后经过下拉按钮展开下拉框(开关样式自行设定)

4858美高梅 30

此地四个文本间的任务计算的不是很成功,重借使那段代码,能够自行设定

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

下拉列表里面包车型客车每1项也是二个模板

  <!-- 查看更多文件 文件信息模版 -->
    <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样式

4858美高梅 314858美高梅 32

  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

 

一. 分界面包车型地铁处理

4858美高梅 334858美高梅 34

分选文件后,大家可以经过删除按键删除选中的文本,因为会冒出多文本的场地,所以须求二个音讯模版

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

            {{name}}
            &times;

    </script>

当选的文本1多,就得再扩张一个下拉框做协助,最多展现5个公文音讯,然后通过下拉按键张开下拉框(按键样式自行设定)

4858美高梅 35

那边四个文件间的岗位计算的不是很成功,主借使这段代码,能够自行设定

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

下拉列表里面包车型大巴每一项也是1个模板

  <!-- 查看更多文件 文件信息模版 -->
    <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样式

4858美高梅 364858美高梅 37

  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

 

看了地方几个图片,能够知晓原生的公文选拔项样式是最大旨的,首要展现在四个点:

二. 本子的处理

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

要获取到当选文件的音信,自然想到用value属性,但通过文件项的value只可以得到到二个文书路线(第3个),无论有未有multiple

无multiple

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

4858美高梅 38

有multiple

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

4858美高梅 39

 

既是向来通过value获取不到具备入选的文件消息,只好寻求其余路径。

 

  1)FileList

取得选中的文件音讯,还能用FileList对象,这是在HTML5中新扩充的,各类表单文件项都有个files属性,里边存款和储蓄那选中的文本的有的新闻

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

选中八个文本后,查看文件新闻

4858美高梅 40

FileList对象看起来是个类数组,有length属性。所以大家理应能够经过改换或删除相关的项来自定义大家选用的公文(注意其实那是不能修改的,且持续看下去)

若是本身选用了三个文本,想删除第3品种,使用splice删除,则

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

4858美高梅 41

报错,因而可见FileList的length属性是只读的,那直接修改为可写可配备呢

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

布置之后length能改改了,乍一看还感觉splice生效了,但是输出一看,FileList对象内容不改变,仍为两项

查阅了一部分材质后,明白到浏览器为了安全性的设想,把FileList对象的始末设为了不可更改,只好手动置空,但不能够修改内容

4858美高梅 42

4858美高梅 43

就此,解决办法是,新添四个数组,开始复制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

HTML伍引进了表单的新目标FormData,
它能够生成三个表单对象,大家得以向里面赢得/设置键值对音信,再1并付出给后台

引用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请求头
});

 

此处有多少个要注意的点:

一)FormData中的属性值接受的是单个文件新闻,不可能是复合性的对象。可能表意不明,且看

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

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

用PHP接收传过来的数目,数据却被一贯转换到字符串了,非文件对象

4858美高梅 44

curFiles是文本对象,那PHP端是或不是应当用$_FILES来抽出音信吗,试试换到$files
= $_FILES[‘myFileTest’];

直接出难点了,表明无法这么处理,需求将curFiles内容一项1项拆开,即单个文件音信

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);

4858美高梅 45

文本吸收接纳成功,接下去就能够按需进行文件的操作了

 

二)后端获取文件消息的时候,是平昔通过原始$_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);

4858美高梅 46

 

叁)假设急需multiple的多文件上传,则需求在文书项的公文后增添[]号,表示那是1个多文件的数组,以供后端处明白析

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

假如未有前面包车型大巴[],则连年的append会间接覆盖原来的,最后后端获取到的只是终极append进去的项

 

四)不要直接在JQ的ajax中实例化出贰个FormData对象,会出难点

4858美高梅 47

直接在data属性中生成FormData对象,会被JQ忽略,所今后端什么新闻也拿不到

 

混合表单项简单的例证:

在表单处理中,大多时候我们会进展文件上传和任何基础项的提交,轻巧地多加二个input项目,看看是否处理成功

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

4858美高梅 48

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

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

?>

4858美高梅 49

 

以下为全部的JS脚本:

4858美高梅 504858美高梅 51

  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));
 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)
 31                 );
 32             }
 33 
 34             // 渲染相关元素内容
 35             $('.file-temp').html(''
 36                 + '<input type="text" style="background-color:#fff;" class="form-control" id="fileTemp" readonly>'
 37                 + htmlTemp.join('')
 38                 + (files.length > 5
 39                     ? '='
 40                     : ''
 41                 )
 42             );
 43 
 44             $('.item-more').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').hide();
 70                 var name = $(this).prev().text();
 71                 // 去除该文件
 72                 curFiles = curFiles.filter(function(file) {
 73                     return file.name !== name;
 74                 });
 75                 // 文件列表数组对象长度大于5才显示“更多文件列表”下拉项
 76                 if (curFiles.length <= 5) {
 77                     $('.item-more').hide();
 78                 }
 79                 // 文件列表数组被清空则重置文件选择表单项
 80                 if (!curFiles.length) {
 81                     $('#fileTest').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() {
 91                 $('.upload-tip').hide();
 92                 $('.item-more').show('normal');
 93             });
 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')
114                         .addClass('text-success')
115                         .removeClass('text-error')
116                         .text(rs.len + '个文件上传成功, number项值为' + rs.num)
117                         .show();
118                 },
119                 error: function(err) {
120 
121                 }
122             });
123         });
124     </script>

View Code

 

后记:

别的,能够设想给文件上传扩展进程条

而当文件太大时,会因为后端帮助的最大文件size不够形成崩溃,那时能够思量进行断点续传

断点续传,前端能够透过二进制流和地面存款和储蓄的整合来达成,那里就不多说了

2. 剧本的拍卖

上面,注重介绍JS脚本的处理

要收获到当选文件的新闻,自然想到用value属性,但经过文件项的value只好获得到2个文书路径(第壹个),无论有未有multiple

无multiple

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

4858美高梅 52

有multiple

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

4858美高梅 53

 

既然平昔通过value获取不到持有入选的文件新闻,只好寻求其余路径。

 

  1)FileList

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

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

选中多少个文本后,查看文件新闻

4858美高梅 54

FileList对象看起来是个类数组,有length属性。所以我们理应能够由此改造或删除相关的项来自定义大家挑选的文书(注意其实那是不能够修改的,且持续看下来)

若是我选用了两个文件,想删除第3类型,使用splice删除,则

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

4858美高梅 55

报错,由此可见FileList的length属性是只读的,那间接改换为可写可配备呢

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

安顿之后length能改改了,乍1看还以为splice生效了,可是输出壹看,FileList对象内容不变,仍为两项

翻开了一部分素材后,理解到浏览器为了安全性的设想,把FileList对象的故事情节设为了不可更换,只可以够手动置空,但不能改改内容

4858美高梅 56

4858美高梅 57

故而,消除办法是,新扩充三个数组,开端复制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提交

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

 

  2)FormData

HTML伍引进了表单的新指标FormData,
它能够生成二个表单对象,我们得以向里面赢得/设置键值对音讯,再1并提交给后台

引用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请求头
});

 

那边有多少个要留意的点:

一)FormData中的属性值接受的是单个文件消息,无法是复合性的指标。可能表意不明,且看

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

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

用PHP接收传过来的数码,数据却被直接转变到字符串了,非文件对象

4858美高梅 58

curFiles是文件对象,那PHP端是或不是应当用$_FILES来收取音信吗,试试换来$files
= $_FILES[‘myFileTest’];

直白出标题了,表达不能够那样处理,需求将curFiles内容1项一项拆开,即单个文件消息

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);

4858美高梅 59

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

 

二)后端获取文件新闻的时候,是向来通过原始$_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);

4858美高梅 60

 

三)如若必要multiple的多文件上传,则要求在文书项的文书后增多[]号,表示那是2个多文件的数组,以供后端处明白析

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

比方未有前边的[],则连接的append会直接覆盖原来的,最终后端获取到的只是终极append进去的项

 

四)不要平昔在JQ的ajax中实例化出三个FormData对象,会出标题

4858美高梅 61

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

 

混合表单项轻易的例证:

在表单处理中,许多时候我们会进展文件上传和任何基础项的提交,轻松地多加2个input项目,看看是还是不是处理成功

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

4858美高梅 62

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

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

?>

4858美高梅 63

 

以下为全部的JS脚本:

4858美高梅 644858美高梅 65

  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));
 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)
 31                 );
 32             }
 33 
 34             // 渲染相关元素内容
 35             $('.file-temp').html(''
 36                 + '<input type="text" style="background-color:#fff;" class="form-control" id="fileTemp" readonly>'
 37                 + htmlTemp.join('')
 38                 + (files.length > 5
 39                     ? '='
 40                     : ''
 41                 )
 42             );
 43 
 44             $('.item-more').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').hide();
 70                 var name = $(this).prev().text();
 71                 // 去除该文件
 72                 curFiles = curFiles.filter(function(file) {
 73                     return file.name !== name;
 74                 });
 75                 // 文件列表数组对象长度大于5才显示“更多文件列表”下拉项
 76                 if (curFiles.length <= 5) {
 77                     $('.item-more').hide();
 78                 }
 79                 // 文件列表数组被清空则重置文件选择表单项
 80                 if (!curFiles.length) {
 81                     $('#fileTest').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() {
 91                 $('.upload-tip').hide();
 92                 $('.item-more').show('normal');
 93             });
 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')
114                         .addClass('text-success')
115                         .removeClass('text-error')
116                         .text(rs.len + '个文件上传成功, number项值为' + rs.num)
117                         .show();
118                 },
119                 error: function(err) {
120 
121                 }
122             });
123         });
124     </script>

View Code

 

后记:

除此以外,能够思虑给文件上传扩展进程条

而当文件太大时,会因为后端协理的最大文件size不够变成崩溃,那时能够设想进行断点续传

断点续传,前端能够透过二进制流和本地存款和储蓄的组合来贯彻,那里就不多说了

无边框,与其他有边框的因素不投缘
分选文件的按键样式太基础
选料八个文件后只彰显总的数量,未出示详细采取的公文名
基于多少个难点,能够按需对其张开美化

率先点能够直接助长边框的体制

第一点须求扩展其余因素,能够激增三个按键(自行按需美化),将原本文件框隐藏,用JS事件绑定,点击开关后模拟文件框的点击

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

其叁点与第二点类似,也得加多新的因素,采取文件后,通过JS获取选用的文书新闻,并在新的成分中展现出来

想着很简短,但随之而来的标题就是,若是当选的文书数量众多,新成分占空间的某个正是个难点,可以私下认可展现多少个公文,再通过“查看更多文本”查看到越来越多的信息

随即此外的想法是,三遍性选中的公文过多,想收回有个别文件时,又得重复采用。那未免太繁琐,所以须求提供即时删除有个别选中文件的操作

3、选普通话件后的删减

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

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

4858美高梅 664858美高梅 67

慎选文件后,大家得以由此删除按键删除选中的文件,因为会油然则生多文本的意况,所以须要三个音讯模版

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

{{name}}
×

</script>

入选的公文1多,就得再增加贰个下拉框做协助,最多显示四个公文音讯,然后经过下拉开关展开下拉框(开关样式自行设定)

4858美高梅 68

这边六个公文间的岗位总结的不是很到位,首若是那段代码,能够活动设定

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

下拉列表里面包车型大巴每1项也是三个模板

  <!-- 查看更多文件 文件信息模版 -->
<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>

二. 本子的处理

上边,珍视介绍JS脚本的处理

要得到到当选文件的音信,自然想到用value属性,但透过文件项的value只好获得到三个文本路线(第3个),无论有未有multiple

无multiple

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

4858美高梅 69

有multiple

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

4858美高梅 70

既然向来通过value获取不到持有入选的文书新闻,只好寻求其余路径。

  1)FileList

赢得选中的文本音信,还是可以用FileList对象,那是在HTML5中新添的,各类表单文件项都有个files属性,里边存款和储蓄那选中的文书的有个别音讯

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

选中多个公文后,查看文件消息

4858美高梅 71

FileList对象看起来是个类数组,有length属性。所以我们理应能够通过修改或删除相关的项来自定义大家采纳的文本(注意其实那是不能改改的,且继续看下去)

倘若自身选取了七个文件,想删除第二项目,使用splice删除,则

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

4858美高梅 72

报错,由此可见FileList的length属性是只读的,那直接退换为可写可配备呢

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

布置之后length能修改了,乍1看还认为splice生效了,然则输出一看,FileList对象内容不变,仍为两项

查阅了有些资料后,了解到浏览器为了安全性的思虑,把FileList对象的始末设为了不可改造,只能够手动置空,但不可能改改内容

4858美高梅 73

4858美高梅 74

4858美高梅 ,从而,化解办法是,新增添贰个数组,初步复制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

HTML五引进了表单的新目标FormData,
它能够生成贰个表单对象,大家可以向里面赢得/设置键值对音讯,再1并付出给后台

引用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请求头
});

那边有几个要小心的点:

①)FormData中的属性值接受的是单个文件新闻,不能够是复合性的靶子。只怕表意不明,且看

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

用PHP接收传过来的数额,数据却被直接调换到字符串了,非文件对象

4858美高梅 75

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);

4858美高梅 76

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

二)后端获取文件音信的时候,是直接通过原始$_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);

4858美高梅 77

三)假如急需multiple的多文件上传,则需求在文件项的文书后增加[]号,表示那是2个多文件的数组,以供后端处驾驭析

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

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

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

4858美高梅 78

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

混合表单项简单的事例:

在表单处理中,诸多时候我们会议及展览开文件上传和别的基础项的付出,轻巧地多加3个input项目,看看是或不是处理成功

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

4858美高梅 79

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

4858美高梅 80

以下为一切的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完结表单多文本上传样式美化帮衬选中文件后删除相关项,希望对我们具备帮忙,倘使我们有此外疑问请给自个儿留言,我会及时复苏我们的。在此也非常谢谢我们对台本之家网址的协理!

你也许感兴趣的稿子:

  • PHP中上传多个文本的表单设计例子
  • Asp.Net模拟表单提交数据和上传文件的兑今世码
  • nodejs
    完毕模拟form表单上传文件
  • Ajax方式交给带文件上传的表单及隐藏iframe应用
  • php中关于常见表单多文件上传的处理格局
  • php文件上传表单摘自drupal的代码
  • ajax(iframe)无刷新提交表单、上传文件
  • asp.net
    模拟提交有文件上传的表单(通过http模拟上传文件)
  • 经过表单的做为贰进制文件上传request.totalbytes提收取上传的二级制数据

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有