js 动态增加file实现多文件上传功能并显示路径
来源:互联网 发布:stc89c52rc单片机介绍 编辑:程序博客网 时间:2024/05/19 13:23
本文有大部分为转载,经过添加部分功能。感谢创作者提供的便利。如有问题请联系我,及时处理此文。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js 动态增加file实现多文件上传功能</title>
</head>
<body>
<script language="javascript">
//全局变量,代表文件域的个数,并用该变量区分文件域的name属性
var file_count = 0;
//增加文件 域
function additem(id) {
if (file_count > 9) {
alert("最多9个");
return;
}
//定义行变量row;单元格变量cell;单元格内容变量str。
var row,cell;
var str='';
//在指定id的table中插入一行
row = eval("document.all['"+id+"']").insertRow();
if(row != null ) {
//设置行的背景颜色
row.bgColor="white";
//在行中插入单元格
cell = row.insertCell();
//设置str的值,包括一个文件域和一个删除按钮
str='<input onselectstart="return false" class="tf" onpaste="return false" type="file" name="file[' + file_count + ']" style="width:500px" onkeydown="return false;"/>';
str += ' <input type="button" value="删除" onclick="deleteitem(this,\'tb\');">';
//文件域个数增加
file_count++;
//设置单元格的innerHTML为str的内容
cell.innerHTML=str;
}
}
//删除文件域
function deleteitem(obj,id) {
var rowNum,curRow;
curRow = obj.parentNode.parentNode;
rowNum = eval("document.all."+id).rows.length - 1;
eval("document.all['"+id+"']").deleteRow(curRow.rowIndex);
file_count--;
}
//显示上传的文件名
function show(){
var tf=document.getElementsByClassName('tf');
//var pname=tf.value;
var str='';
for(var i=0;i<tf.length;i++){
var s=tf[i].value;
str=str+s+';';
}
document.getElementById('picshow').innerHTML=str;
}
</script>
<table cellspacing="0" id="tb" style="width:400px">
</table>
<input type=button value="显示" onclick='show()'/>
<div id="picshow"></div>
</body>
</html>
0 0
- js 动态增加file实现多文件上传功能并显示路径
- js file上传图片并显示出来
- 原生JS实现ajax上传文件并显示进度条
- 实现文件上传功能,并在页面上显示上传的图片
- js实现图片上传并即时显示
- Node.js 博客实例(三)增加文件上传功能
- 多文件上传(动态增加 FileUpload)
- 用Struts实现动态多文件上传功能
- js判断input file上传文件路径是否正确
- 文件上传js清除file标签的路径
- JS获取file上传文件路径,后缀,大小,文件名
- 文件上传js清除file标签的路径
- html 使用Ajax 实现多文件上传,并显示进度
- js实现复制功能(文件上传)
- 使用ajaxfileupload.js实现上传文件功能
- 使用ajaxfileupload.js实现上传文件功能
- 动态创建web路径,并存储临时上传文件
- File Uploader:支持进度显示与文件拖拽的多文件上传前端JS脚本
- arcgis for flex api version3.7 教程:2.通过地图服务的ID添加地图
- 编译原理 总结
- H264基本概念之 预测编码、变换编码和熵编码
- rstudio-server使用github版本控制
- Sublime Text3下,实现函数声明的跳转
- js 动态增加file实现多文件上传功能并显示路径
- 数据导入mongodb等数据简单框架实现
- POJ-1384 完全背包
- linux7.0系统修复
- 紧急情况下测试周期被压缩该如何测试?
- 文件读取,写入(去除源文件内容)以及追加写入(保留原文件内容)
- Unique Permutations
- Oracle SQLServer MySQL查看当前所有数据库表名及其他信息
- Unity3D Shader入门指南