原生js图片批量上传工具php动态批量上传图片软件代码



242 966 323



特效描述:原生js 图片批量上传 批量上传工具 动态批量上传 上传图片软件,网站上这个(上传目录没有权限)所以没法演示。 内含php文件源码,本地要安装服务端运行环境,才能正常演示。

代码结构

1. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多文件上传组件</title>
 <!--影片中使用的 URL-->
  <!--影片中使用的文本-->
  <!-- saved from url=(0013)about:internet -->
  <script language="javascript">
function challs_flash_update(){ //Flash 初始化函数
	var a={};
	//定义变量为Object 类型
	a.title = "上传文件"; //设置组件头部名称
	a.FormName = "Filedata";
	//设置Form表单的文本域的Name属性
	a.url = "update.php"; 
	//设置服务器接收代码文件
	a.parameter = ""; 
	//设置提交参数,以GET形式提交,例:"key=value&key=value&..."
	a.typefile = ["Images (*.gif,*.png,*.jpg,*jpeg)","*.gif;*.png;*.jpg;*.jpeg;",
				"GIF (*.gif)","*.gif;",
				"PNG (*.png)","*.png;",
				"JPEG (*.jpg,*.jpeg)","*.jpg;*.jpeg;"];
	//设置可以上传文件 数组类型
	//"Images (*.gif,*.png,*.jpg)"为用户选择要上载的文件时可以看到的描述字符串,
	//"*.gif;*.png;*.jpg"为文件扩展名列表,其中列出用户选择要上载的文件时可以看到的 Windows 文件格式,以分号相隔
	//2个为一组,可以设置多组文件类型
	a.newTypeFile = ["Images (*.gif,*.png,*.jpg,*jpeg)","*.gif;*.png;*.jpg;*.jpeg;","JPE;JPEG;JPG;GIF;PNG",
				"GIF (*.gif)","*.gif;","GIF",
				"PNG (*.png)","*.png;","PNG",
				"JPEG (*.jpg,*.jpeg)","*.jpg;*.jpeg;","JPE;JPEG;JPG"];
	//设置可以上传文件,多了一个苹果电脑文件类型过滤 数组类型, 设置了此项,typefile将无效
	//"Images (*.gif,*.png,*.jpg)"为用户选择要上载的文件时可以看到的描述字符串,
	//"*.gif;*.png;*.jpg"为文件扩展名列表,其中列出用户选择要上载的文件时可以看到的 Windows 文件格式,以分号相隔
	//"JPE;JPEG;JPG;GIF;PNG" 分号分隔的 Macintosh 文件类型列表,如下面的字符串所示:"JPEG;jp2_;GI
	a.UpSize = 0;
	//可限制传输文件总容量,0或负数为不限制,单位MB
	a.fileNum = 0;
	//可限制待传文件的数量,0或负数为不限制
	a.size = 1;
	//上传单个文件限制大小,单位MB,可以填写小数类型
	a.FormID = ['album_id','watermark'];
	//设置每次上传时将注册了ID的表单数据以POST形式发送到服务器
	//需要设置的FORM表单中checkbox,text,textarea,radio,select项目的ID值,radio组只需要一个设置ID即可
	//参数为数组类型,注意使用此参数必须有 challs_flash_FormData() 函数支持
	a.autoClose = 1;
	//上传完成条目,将自动删除已完成的条目,值为延迟时间,以秒为单位,当值为 -1 时不会自动关闭,注意:当参数CompleteClose为false时无效
	a.CompleteClose = true;
	//设置为true时,上传完成的条目,将也可以取消删除条目,这样参数 UpSize 将失效, 默认为false
	a.repeatFile = true;
	//设置为true时,可以过滤用户已经选择的重复文件,否则可以让用户多次选择上传同一个文件,默认为false
	a.returnServer = true;
	//设置为true时,组件必须等到服务器有反馈值了才会进行下一个步骤,否则不会等待服务器返回值,直接进行下一步骤,默认为false
	a.MD5File = 1;
	//设置MD5文件签名模式,参数如下 ,注意:FLASH无法计算超过100M的文件,在无特殊需要时,请设置为0
	//0为关闭MD5计算签名
	//1为直接计算MD5签名后上传
	//2为计算签名,将签名提交服务器验证,在根据服务器反馈来执行上传或不上传
	//3为先提交文件基本信息,根据服务器反馈,执行MD5签名计算或直接上传,如果是要进行MD5计算,计算后,提交计算结果,在根据服务器反馈,来执行是否上传或不上传
	a.loadFileOrder=true;
	//选择的文件加载文件列表顺序,TRUE = 正序加载,FALSE = 倒序加载
	a.mixFileNum=0;
	//至少选择的文件数量,设置这个将限制文件列表最少正常数量(包括等待上传和已经上传)为设置的数量,才能点击上传,0为不限制
	a.ListShowType = 2;
	//文件列表显示类型:1 = 传统列表显示,2 = 缩略图列表显示(适用于图片专用上传)
	a.InfoDownRight = "";
	//右下角统计信息的文本设置,文本中的 %1% = 等待上传数量的替换符号,%2% = 已经上传数量的替换符号,例子"等待上传:%1%个  已上传:%2%个"
	a.TitleSwitch = true;
	//是否显示组件头部
	a.ForceFileNum = 0;
	//强制条目数量,已上传和待上传条目相加等于为设置的值(不包括上传失败的条目),否则不让上传, 0为不限制,设置限制后mixFileNum,autoClose和fileNum属性将无效!
	a.autoUpload = false;
	//设置为true时,用户选择文件后,直接开始上传,无需点击上传,默认为false;
	a.adjustOrder = true;
	//设置为true时,用户可以拖动列表,重新排列位置
	a.deleteAllShow = true
	//设置是否显示,全部清除按钮
	a.language = 0; 
	//语言包控制,0 自动检测 1 简体中文,2 繁体中文 3 英文
	a.countData = true;
	//是否向服务器端提交组件文件列表统计信息,POST方式提交数据
	//access2008_box_info_max 列表总数量
	//access2008_box_info_upload 剩余数量 (包括当前上传条目)
	//access2008_box_info_over 已经上传完成数量 (不包括当前上传条目)
	a.isShowUploadButton = true;
	//是否显示上传按钮,默认为true
	return a ;
	//返回Object
}
function challs_flash_onComplete(a){ //每次上传完成调用的函数,并传入一个Object类型变量,包括刚上传文件的大小,名称,上传所用时间,文件类型
	var name=a.fileName; //获取上传文件名
	var size=a.fileSize; //获取上传文件大小,单位字节
	var time=a.updateTime; //获取上传所用时间 单位毫秒
	var type=a.fileType; //获取文件类型,在 Windows 上,此属性是文件扩展名。 在 Macintosh 上,此属性是由四个字符组成的文件类型
	//document.getElementById('show').innerHTML+=name+' --- '+size+'字节 ----文件类型:'+type+'--- 用时 '+(time/1000)+'秒<br><br>'
}
function challs_flash_onCompleteData(a){ //获取服务器反馈信息事件
	document.getElementById('show').innerHTML+='<font color="#ff0000">服务器端反馈信息:</font><br />'+a+'<br />';	
}
function challs_flash_onStart(a){ //开始一个新的文件上传时事件,并传入一个Object类型变量,包括刚上传文件的大小,名称,类型
	var name=a.fileName; //获取上传文件名
	var size=a.fileSize; //获取上传文件大小,单位字节
	var type=a.fileType; //获取文件类型,在 Windows 上,此属性是文件扩展名。 在 Macintosh 上,此属性是由四个字符组成的文件类型
	//document.getElementById('show').innerHTML+=name+'开始上传!<br />';
	return true; //返回 false 时,组件将会停止上传
}
function challs_flash_onStatistics(a){ //当组件文件数量或状态改变时得到数量统计,参数 a 对象类型
	var uploadFile = a.uploadFile; //等待上传数量
	var overFile = a.overFile; //已经上传数量
	var errFile = a.errFile; //上传错误数量
}
function challs_flash_alert(a){ //当提示时,会将提示信息传入函数,参数 a 字符串类型
	//document.getElementById('show').innerHTML+='<font color="#ff0000">组件提示:</font>'+a+'<br />';
}
function challs_flash_onCompleteAll(a){ //上传文件列表全部上传完毕事件,参数 a 数值类型,返回上传失败的数量
	//document.getElementById('show').innerHTML+='<font color="#ff0000">所有文件上传完毕,</font>上传失败'+a+'个!<br />';
	//window.location.href='http://www.access2008.cn/update'; //传输完成后,跳转页面
}
function challs_flash_onSelectFile(a){ //用户选择文件完毕触发事件,参数 a 数值类型,返回等待上传文件数量
	//document.getElementById('show').innerHTML+='<font color="#ff0000">文件选择完成:</font>等待上传文件'+a+'个!<br />';
}
function challs_flash_deleteAllFiles(){ //清空按钮点击时,出发事件
	//返回 true 清空,false 不清空
	return confirm("你确定要清空列表吗?");
}
function challs_flash_onError(a){ //上传文件发生错误事件,并传入一个Object类型变量,包括错误文件的大小,名称,类型
	var err=a.textErr; //错误信息
	var name=a.fileName; //获取上传文件名
	var size=a.fileSize; //获取上传文件大小,单位字节
	var type=a.fileType; //获取文件类型,在 Windows 上,此属性是文件扩展名。 在 Macintosh 上,此属性是由四个字符组成的文件类型
	//document.getElementById('show').innerHTML+='<font color="#ff0000">'+name+' - '+err+'</font><br />';
}
function challs_flash_FormData(a){ // 使用FormID参数时必要函数
	try{
		var value = '';
		var id=document.getElementById(a);
		if(id.type == 'radio'){
			var name = document.getElementsByName(id.name);
			for(var i = 0;i<name.length;i++){
				if(name[i].checked){
					value = name[i].value;
				}
			}
		}else if(id.type == 'checkbox'){
			var name = document.getElementsByName(id.name);
			for(var i = 0;i<name.length;i++){
				if(name[i].checked){
					if(i>0) value+=",";
					value += name[i].value;
				}
			}
		}else if(id.type == 'select-multiple'){
		    for(var i=0;i<id.length;i++){
		        if(id.options[i].selected){
					if(i>0) value+=",";
			         values += id.options[i].value; 
			    }
		    }
		}else{
			value = id.value;
		}
		return value;
	 }catch(e){
		return '';
	 }
}
function challs_flash_style(){ //组件颜色样式设置函数
	var a = {};
	/*  整体背景颜色样式 */
	a.backgroundColor=['#f6f6f6','#f3f8fd','#dbe5f1'];	//颜色设置,3个颜色之间过度
	a.backgroundLineColor='#5576b8';					//组件外边框线颜色
	a.backgroundFontColor='#066AD1';					//组件最下面的文字颜色
	a.backgroundInsideColor='#FFFFFF';					//组件内框背景颜色
	a.backgroundInsideLineColor=['#e5edf5','#34629e'];	//组件内框线颜色,2个颜色之间过度
	a.upBackgroundColor='#ffffff';						//上翻按钮背景颜色设置
	a.upOutColor='#000000';								//上翻按钮箭头鼠标离开时颜色设置
	a.upOverColor='#FF0000';							//上翻按钮箭头鼠标移动上去颜色设置
	a.downBackgroundColor='#ffffff';					//下翻按钮背景颜色设置
	a.downOutColor='#000000';							//下翻按钮箭头鼠标离开时颜色设置
	a.downOverColor='#FF0000';							//下翻按钮箭头鼠标移动上去时颜色设置
	/*  头部颜色样式 */
	a.Top_backgroundColor=['#e0eaf4','#bcd1ea']; 		//颜色设置,数组类型,2个颜色之间过度
	a.Top_fontColor='#245891';							//头部文字颜色
	/*  按钮颜色样式 */
	a.button_overColor=['#FBDAB5','#f3840d'];			//鼠标移上去时的背景颜色,2个颜色之间过度
	a.button_overLineColor='#e77702';					//鼠标移上去时的边框颜色
	a.button_overFontColor='#ffffff';					//鼠标移上去时的文字颜色
	a.button_outColor=['#ffffff','#dde8fe']; 			//鼠标离开时的背景颜色,2个颜色之间过度
	a.button_outLineColor='#91bdef';					//鼠标离开时的边框颜色
	a.button_outFontColor='#245891';					//鼠标离开时的文字颜色
	/* 文件列表样式 */
	a.List_scrollBarColor="#000000"						//列表滚动条颜色
	a.List_backgroundColor='#EAF0F8';					//列表背景色
	a.List_fontColor='#333333';							//列表文字颜色
	a.List_LineColor='#B3CDF1';							//列表分割线颜色
	a.List_cancelOverFontColor='#ff0000';				//列表取消文字移上去时颜色
	a.List_cancelOutFontColor='#D76500';				//列表取消文字离开时颜色
	a.List_progressBarLineColor='#B3CDF1';				//进度条边框线颜色
	a.List_progressBarBackgroundColor='#D8E6F7';		//进度条背景颜色	
	a.List_progressBarColor=['#FFCC00','#FFFF00'];		//进度条进度颜色,2个颜色之间过度
	/* 错误提示框样式 */
	a.Err_backgroundColor='#C0D3EB';					//提示框背景色
	a.Err_fontColor='#245891';							//提示框文字颜色
	a.Err_shadowColor='#000000';						//提示框阴影颜色
	return a;
}
var isMSIE = (navigator.appName == "Microsoft Internet Explorer");   
function thisMovie(movieName){   
  if(isMSIE){   
  	return window[movieName];   
  }else{
  	return document[movieName];   
  }   
}
</script>
<style type="text/css" >
body{margin:0;padding:0;font}
.lfa{width:79%;;height:30px; margin:40px 0 20px 50px;}
.sa{width:64px;}
.se{width:260px; }
.crt{width:80px;}
.f{float:left;}
.m_smltSelect{border:1px #999 solid;width:240px;}
.m_smltSelect{ position:relative;}
.select{  background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E1E1E1;
    cursor: pointer;
    height: 17px;
    padding: 6px 3px 6px 5px;
    text-align: right;}
.name{ cursor: pointer;float: left;overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; width: 205px;}
.M_ico{ background:url("http://t.jsg.com/img/icon.png?v=20120719") no-repeat scroll -35px -30px transparent;display: inline-block; margin-right: 2px; background-position: 0 -990px;
    height: 17px;
    vertical-align: top;
    width: 17px;}
.water{float:right;width:144px;}
</style>
</head>
<body bgcolor="#ffffff">
<div style="margin:0 auto; width:900px;height:600px;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"  codebase="http://t.jsg.com/swflash.cab#version=10,0,0,0" width="877" height="577" id="update" align="middle">
<param name="allowFullScreen" value="false"/>
    <param name="allowScriptAccess" value="always" />
	<param name="movie" value="update.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="update.swf" quality="high" bgcolor="#ffffff" width="877" height="577" name="update" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>
<div id="show" style="margin-top:20px; width:500px; text-align:left;"></div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 文字提示框 文件上传 提示框/弹出层 文本框 layer 下拉框 lightbox 复选 单选 Tooltip工具提示框 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 弹出层拖动 窗口提示框 切换按钮 form表单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到