js input file多个文件上传功能特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js input file多个文件上传功能特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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 input file多个文件上传功能</title>
<link rel="stylesheet" type="text/css" href="css/public.css">
<style type="text/css">
.message{width:320px;margin:120px auto 0px auto;line-height:24px;color:#ffd5bc;overflow:hidden}
.message .input{width:219px;height:28px;line-height:28px;border:none;background:#333333;padding-left:20px;color:#ffffff;font-family:Microsoft YaHei;}
.message .liulan{width:64px;height:28px;border:1px solid #ffb660;background:#fe9e19;color:#ffffff;cursor:pointer;}
.message .files{position:absolute;left:-1000px;top:52px;heigth:26px;cursor:pointer;filter: Alpha(opacity=0);-moz-opacity:0;opacity:0;} 
</style>

<!--[if IE]>
    <script src="js/html5.js"></script>
<![endif]-->

</head>

<body>	

<div class="message">
	<form method="post" action="" enctype="multipart/form-data">
		<input type="text" id="txt" name="txt" class="input" value="文件域" disabled="disabled" />
		<input type="button" onMouseMove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="上传图片" size="30" onClick="f.click()" class="liulan">
		<input type="file" id="f" onChange="txt.value=this.value" name="f" style="height:26px;" class="files"  size="1" hidefocus>
	</form>
</div>
</body>
</html>

JS代码(html5.js):

/* HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed Uncompressed source:https://github.com/aFarkas/html5shiv*/
(function(l,f){
	function m(){
	var a=e.elements;
	return"string"==typeof a?a.split(" "):a}
function i(a){
	var b=n[a[o]];
	b||(b={
}
,h++,a[o]=h,n[h]=b);
	return b}
function p(a,b,c){
	b||(b=f);
	if(g)return b.createElement(a);
	c||(c=i(b));
	b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);
	return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}
function t(a,b){
	if(!b.cache)b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
	a.createElement=function(c){
	return!e.shivMethods?b.createElem(c):p(c,a,b)}
;
	a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+m().join().replace(/\w+/g,function(a){
	b.createElem(a);
	b.frag.createElement(a);
	return'c("'+a+'")'}
)+");
	return n}
")(e,b.frag)}
function q(a){
	a||(a=f);
	var b=i(a);
	if(e.shivCSS&&!j&&!b.hasCSS){
	var c,d=a;
	c=d.createElement("p");
	d=d.getElementsByTagName("head")[0]||d.documentElement;
	c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{
	display:block}
mark{
	background:#FF0;
	color:#000}
</style>";
	c=d.insertBefore(c.lastChild,d.firstChild);
	b.hasCSS=!!c}
g||t(a,b);
	return a}
var k=l.html5||{
}
,s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={
}
,g;
	(function(){
	try{
	var a=f.createElement("a");
	a.innerHTML="<xyz></xyz>";
	j="hidden"in a;
	var b;
	if(!(b=1==a.childNodes.length)){
	f.createElement("a");
	var c=f.createDocumentFragment();
	b="undefined"==typeof c.cloneNode||"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}
g=b}
catch(d){
	g=j=!0}
}
)();
	var e={
	elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){
	a||(a=f);
	if(g)return a.createDocumentFragment();
	for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;
	d<h;
	d++)c.createElement(e[d]);
	return c}
}
;
	l.html5=e;
	q(f)}
)(this,document);
	// JavaScript Document

附件:下载该文件资源,减少时间成本(增值服务)