<html>
<head>
<title>Add Files</title>
<style>
a.addfile {
background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-823px -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}
input.addfile {
/*left:-18px;*/
}
input.addfile {
cursor:pointer !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);
position:absolute;
top:5px;
width:1px;
z-index: -1;
}
</style>
<script type="text/javascript">
function MultiSelector(list_target, max)
{
// Where to write the list
this.list_target = list_target;
// How many elements?
this.count = 0;
// How many elements?
this.id = 0;
// Is there a maximum?
if (max)
{
this.max = max;
}
else
{
this.max = -1;
};
/**
* Add a new file input element
*/
this.addElement = function(element)
{
// Make sure it's a file input element
if (element.tagName == 'INPUT' && element.type == 'file')
{
// Element name -- what number am I?
element.name = 'file_' + this.id++;
// Add reference to this object
element.multi_selector = this;
// What to do when a file is selected
element.onchange = function()
{
// New file input
var new_element = document.createElement('input');
new_element.type = 'file';
new_element.size = 1;
new_element.className = "addfile";
// Add new element
this.parentNode.insertBefore(new_element, this);
// Apply 'update' to element
this.multi_selector.addElement(new_element);
// Update list
this.multi_selector.addListRow(this);
// Hide this: we can't use display:none because Safari doesn't like it
this.style.position = 'absolute';
this.style.left = '-1000px';
};
// If we've reached maximum number, disable input element
if (this.max != -1 && this.count >= this.max)
{
element.disabled = true;
};
// File element counter
this.count++;
// Most recent element
this.current_element = element;
}
else
{
// This can only be applied to file input elements!
alert('Error: not a file input element');
};
};
/**
* Add a new row to the list of files
*/
this.addListRow = function(element)
{
// Row div
var new_row = document.createElement('div');
// Delete button
var new_row_button = document.createElement('input');
new_row_button.type = 'button';
new_row_button.value = 'Delete';
// References
new_row.element = element;
// Delete function
new_row_button.onclick = function()
{
// Remove element from form
this.parentNode.element.parentNode.removeChild(this.parentNode.element);
// Remove this row from the list
this.parentNode.parentNode.removeChild(this.parentNode);
// Decrement counter
this.parentNode.element.multi_selector.count--;
// Re-enable input element (if it's disabled)
this.parentNode.element.multi_selector.current_element.disabled = false;
// Appease Safari
// without it Safari wants to reload the browser window
// which nixes your already queued uploads
return false;
};
// Set row value
new_row.innerHTML = element.value + " ";
// Add button
new_row.appendChild(new_row_button);
// Add it to the list
this.list_target.appendChild(new_row);
};
};
</script>
</head>
<body>
<!-- This is the form -->
<form enctype="multipart/form-data" action="http://127.0.0.1:8080/xxx/fileUploadAction.action" method="post">
<!-- The file element -- NOTE: it has an ID -->
<a href="javascript:void(1==1);" class="addfile" style="cursor: default;" hidefocus="true">
<input id="my_file_element" class="addfile" type="file" name="file_1" size="1" title="点击选择附件">
</a>
<input type="submit" value="上 传">
</form>
Files:
<!-- This is where the output will appear -->
<div id="files_list" style="padding:5px;border:1px;border-style:solid;border-color:#0000ff;height:100px;width:600px;"></div>
<script>
<!-- Create an instance of the multiSelector class, pass it the output target and the max number of files -->
var multi_selector = new MultiSelector(document.getElementById('files_list'), 100);
<!-- Pass in the file element -->
multi_selector.addElement(document.getElementById('my_file_element'));
</script>
</body>
</html>
分享到：
相关推荐
这个“仿网易界面可以左右滑动的demo”正是这样一个实例，它模仿了网易产品中的滑动菜单功能，让用户能够通过简单的手势在不同的内容板块之间导航。 滑动界面通常基于触摸屏设备，如智能手机和平板电脑，但也可以...
【Qt高仿网易云音乐界面源码】是一个基于Qt库创建的项目，旨在实现与网易云音乐客户端相似的用户界面。这个源码是Qt开发者学习和研究界面设计、交互实现以及Qt库应用的一个良好实例。Qt是一个跨平台的C++图形用户...
网易云音乐是一款非常优秀的音乐播放器，尤其是播放界面，使用唱盘机风格，显得格外古典优雅。笔者出于学习与挑战的想法，思考播放界面背后的实现原理，并写了一个小程序。 笔者尽可能地去模仿官方的视觉、交互...
网易邮箱作为国内广受欢迎的电子邮件服务提供商，其登录界面设计简洁而高效，为用户提供了良好的使用体验。我们将在下面的内容中详细讲解如何利用这些技术来复刻这一界面。 首先，我们需要理解HTML（HyperText ...
基于Avalonia+MVVM实现的仿网易云UI界面；基于Avalonia+MVVM实现的仿网易云UI界面；基于Avalonia+MVVM实现的仿网易云UI界面；基于Avalonia+MVVM实现的仿网易云UI界面；基于Avalonia+MVVM实现的仿网易云UI界面；基于...
Android仿网易云音乐播放转盘界面
综上所述，创建一个仿网易云界面的Android音乐播放器涉及了Android UI设计、多媒体播放、动画效果、事件处理、服务组件、权限管理和测试等多个方面。通过不断学习和实践，开发者可以掌握这些技能，打造出自己的个性...
基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用无需修改。 基于HTML+CSS的静态网页设计仿网易云音乐静态页面项目源码.zip 亲测95分以上高分必过项目，下载即用...
【Python GUI 仿制网易云音乐界面毕业设计详解】 在当今数字时代，音乐播放器已经成为我们日常生活中的必备工具。作为一款备受用户喜爱的音乐平台，网易云音乐以其独特的设计和丰富的功能深受用户喜爱。本项目旨在...
【标题】：“仿网易云音乐界面UI”是一个项目，旨在复制和实现网易云音乐应用程序的用户界面设计。这个项目可能是由个人开发者或者设计团队完成，目的是为了学习、实践或者展示他们在用户界面设计和开发上的技能。 ...
【标题】"仿网易音乐播放器"涉及到的是一款模仿网易云音乐设计的音乐播放软件的开发，这样的项目通常包括音乐的播放、暂停、上一首、下一首、音量控制等功能，以及界面设计和动画效果的实现。在开发过程中，开发者...
本文主要给大家介绍了关于Android高仿网易云音乐启动页的相关内容，这一节我们来讲解启动界面，效果如下： 首次创建一个SplashActivity用来做启动界面，因为创建完项目默认是MainActivity做主界面，所以需要去掉，...
在这个“HTML作业-仿网易云音乐项目”中，我们可以深入探讨HTML在构建交互式音乐应用中的运用。 首先，HTML是网页的基础，用于定义页面结构。在这个项目中，HTML元素被用来创建各种组件，如播放器界面、音乐列表、...
在"仿网易云音乐平台（vue项目）"中，Vue.js 被用于构建用户界面，实现了音乐播放器的各项功能。Vue 的核心特性包括虚拟DOM、响应式数据绑定、指令系统以及组件化开发，使得开发者能够高效地构建复杂应用。 【HTML...
前言：音乐播放器倒见过不少，做到几乎和官方网易云音乐安卓版差不多的，...aa112901的这款仿网易云音乐安卓版客户端，很多地方值得我们学习。无论是下载模块，还是换肤模块，还是炫丽的UI界面。等。用心在每一个细节。
【标题】"高仿网易新闻客户端主界面"指的是在Android或iOS平台上开发一个与网易新闻客户端主界面设计类似的移动应用界面。这个项目可能是为了学习和理解新闻客户端UI设计的实现，或者是开发者展示其UI设计和编程技能...
winwebmail仿163界面winwebmail仿163界面winwebmail仿163界面winwebmail仿163界面winwebmail仿163界面winwebmail仿163界面winwebmail仿163界面winwebmail仿163界面winwebmail仿163界面winwebmail仿163界面