程序博客网 > 管家婆导入数据失败

页面支持选择多个文件并上传（非插件，脚本实现）

来源：互联网发布：管家婆导入数据失败编辑：程序博客网时间：2024/06/05 03:16

最近一个朋友遇到这个问题，由于公司的页面已经写好了。所以插件用不上，而且插件对浏览器的支持并不一定很理想。所以我实现了一个简略版，需要优化和完善。代码如下：

<body>
<form action="upload.do" method="post">
<span class="choosefile">选择文件</span>
<input type="button" value="上传"/>
</form>
</body>

页面body里面，我只放入一个span块元素，用CSS修饰一下，看起来像一个大大的选择文件按钮。

剩下的事情就交给脚本来完成。

<script type="text/javascript">
$(function(){
var filecount = 0;
var filenamecount=0;
$(".choosefile").click(function(){
var inputfile ="<input type='file' style='display:none;' name='fileinput' class='fileinput";
var filenamediv="<div class='filename";
filenamediv+=(filenamecount++)+"'></div>";
inputfile += (filecount++)+"'/>";
$("form").append(inputfile);
$(".fileinput"+(filecount-1)).click();
$(".fileinput"+(filecount-1)).change(function(){
var v=$(this).val();
$(filenamediv).appendTo($("form"));
$(".filename"+(filenamecount-1)).text(v.substring(v.lastIndexOf("\\")+1,v.length));
});
});
//节点删除，名称DIV节点，文件上传输入框节点，
//最好放入一个大的DIV容器，最后删除名称DIV节点的父节点即这个大的DIV容器节点就可以了...

});
</script>

主要就是节点的归类和包装。如何用JS统一管理这些节点，如动态插入，动态删除。最后就是表单的一个提交过程，后台用struts2的就用File文件数组来接受。

这个是我觉得最容易实现的方法。

还有一个方法就是我打算用一个Input[file]去接收多个文件并用脚本保存合并的文件流最后用ajax提交到后台，实现难度在于如何对文件进行流化并且合并，如何解读input[file]文件的选择与否，html标签的编译与解析都是浏览器完成的JS如何做到？后台如何对已经流化的文件进行解析？浏览器可以将本地文件流化通过HTTP传到后台，但是用JS如何流化并且以什么样的形式进行合并多个文件流一起发送？后台如何对合并的多文件流进行拆分和解析。

管家婆导入数据失败

管家婆导入数据失败

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子句型结构句型英文英语基本句型英语句型结构大全英语句型大全英语常用句型强调句型的用法英语高级句型英语作文句型英语强调句型英语常用句型结构大全英语5种基本句型英语句型结构英语句型转换常用英语短语英语八种基本句型英语五种基本句型英文作文常用句型英语作文高级句型英语写作高级句型英文写作常用句型比较级十个基本句型 with复合结构经典句型大学英语作文必背句型英语议论文常用句型英语句子结构及五种基本句型英语书信开头结尾高端句型我姓赵却什么的一句话我姓徐配一句情话我姓王配一句情话我姓王配一句霸气的话食色姓也下一句是什么我姓何一句话图片我姓杨后面接一句情话唯美句子正能量句子早上好句子句子早上句子秋天句子感恩句子