`

uploadify上传文件

阅读更多

 

发现网上很多人写的都好像是旧的方法,好像已经过时了……找了很久

在Change Log.txt中看的见版本

这个是我的v3.2.1- Updated uploadify.swf with security updates from secure swfupload.

自己写了一个,又找了别人的一个,贴上两个文件

这个是我自己写的,实现了 单个文件和多文件上传的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>uploadify多文件上传</title>

<script type="text/javascript" src="../js/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="uploadify/scripts/jquery.uploadify.js" ></script>

<script type="text/javascript">
	$(function(){
		$("#testFileInput").uploadify({
			swf:'uploadify/scripts/uploadify.swf',
			uploader:'../UploadUtil',
			formData:{PHPSESSID:'xxx', ajax:1},
			buttonText:'请选择文件',
			fileSizeLimit:'200KB',
			fileTypeDesc:'*.jpg;*.jpeg;*.gif;*.png;',
			fileTypeExts:'*.jpg;*.jpeg;*.gif;*.png;',
			auto:true,
			multi:true
		});
		$("#testFileInput2").uploadify({
			swf:'uploadify/scripts/uploadify.swf',
			uploader:'../UploadUtil',
			queueID:'fileQueue',
			buttonImage:'uploadify/img/add.jpg',
			buttonClass:'my-uploadify-button',
			cancelImg: 'uploadify/img/cancel.jpg',
			width:102,
			auto:false,
			multi:true
		});
	});
</script>

<link rel="stylesheet" type="text/css" href="uploadify/css/uploadify.css"/>

<style type="text/css" media="screen">
.my-uploadify-button {
	background:none;
	border: none;
	text-shadow: none;
	border-radius:0;
}

.uploadify:hover .my-uploadify-button {
	background:none;
	border: none;
}

.fileQueue {
	width: 400px;
	height: 150px;
	overflow: auto;
	border: 1px solid #E5E5E5;
	margin-bottom: 10px;
}
</style>

</head>
<body>
<h2>uploadify多文件上传</h2>
		<input id="testFileInput" type="file" name="image" />

	<div class="divider"></div>

	<input id="testFileInput2" type="file" name="image2" />
	
	<div id="fileQueue" class="fileQueue"></div>
	
	<input type="image" src="uploadify/img/upload.jpg" onclick="$('#testFileInput2').uploadify('upload', '*');"/>
	<input type="image" src="uploadify/img/cancel.jpg" onclick="$('#testFileInput2').uploadify('cancel', '*');"/>
</body>
</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>uploadify 多文件上传例子</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadify-3.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<style type="text/css">
body {
	font: 13px Arial, Helvetica, Sans-serif;
}
.haha{
	color:#FFFFFF;
}
#queue {
    background-color: #FFF;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    height: 103px;
    margin-bottom: 10px;
    overflow: auto;
    padding: 5px 10px;
    width: 300px;
}
</style>
</head>


<body>
	<h1>Uploadify Demo</h1>
	<form>
		<div id="queue"></div>
		<input id="file_upload" name="file_upload" type="file" multiple="true">
	</form>
	
	<script type="text/javascript">
		$(function() {
			$('#file_upload').uploadify({
				'debug' 		: false,
				'auto' 			: true, 			//是否自动上传,
				'buttonClass' 	: 'haha', 			//按钮辅助class
				'buttonText'  	: '上传图片', 		//按钮文字
				'height'      	: 30,				//按钮高度
				'width'			: 100,				//按钮宽度
				//'checkExisting' : 'check-exists.php',//是否检测图片存在,不检测:false
				'fileObjName'   : 'files',			 //默认 Filedata, $_FILES控件名称
				'fileSizeLimit' : '1024KB',			 //文件大小限制 0为无限制 默认KB
				'fileTypeDesc'  : 'All Files',		 //图片选择描述
				'fileTypeExts'  : '*.gif; *.jpg; *.png',//文件后缀限制 默认:'*.*'
				'formData'      : {'someKey' : 'someValue', 'someOtherKey' : 1},//传输数据JSON格式
				//'overrideEvents': ['onUploadProgress'],  // The progress will not be updated
				//'progressData' : 'speed',				//默认percentage 进度显示方式
				'queueID'		: 'queue',				//默认队列ID
				'queueSizeLimit': 20, 					//一个队列上传文件数限制
				'removeCompleted' : true,				//完成时是否清除队列 默认true
				'removeTimeout'   : 3,					//完成时清除队列显示秒数,默认3秒
				'requeueErrors'   : false,				//队列上传出错,是否继续回滚队列
				'successTimeout'  : 5,					//上传超时
				'uploadLimit'     : 99,					//允许上传的最多张数
				'swf'  : 'uploadify.swf', //swfUpload
				'uploader': 'uploadify.php', //服务器端脚本


				//修改formData数据
				'onUploadStart' : function(file) {
		            //$("#file_upload").uploadify("settings", "someOtherKey", 2);
		        },
		        //删除时触发
		        'onCancel' : function(file) {
		            //alert('The file ' + file.name + '--' + file.size + ' was cancelled.');
		        },
		        //清除队列
		        'onClearQueue' : function(queueItemCount) {
		            //alert(queueItemCount + ' file(s) were removed from the queue');
		        },
		        //调用destroy是触发
		        'onDestroy' : function() {
                    alert('我被销毁了');
                },
                //每次初始化一个队列是触发
                'onInit' : function(instance){
                    //alert('The queue ID is ' + instance.settings.queueID);
                },
                //上传成功
                'onUploadSuccess' : function(file, data, response) {
                    //alert(file.name + ' | ' + response + ':' + data);
                },
                //上传错误
                'onUploadError' : function(file, errorCode, errorMsg, errorString) {
                    //alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
                },
                //上传汇总
                'onUploadProgress' : function(file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) {
                    $('#progress').html(totalBytesUploaded + ' bytes uploaded of ' + totalBytesTotal + ' bytes.');
                },
                //上传完成
                'onUploadComplete' : function(file) {
                	//alert('The file ' + file.name + ' finished processing.');
            	},
             
			});
		});


		//变换按钮
		function changeBtnText() {
		    $('#file_upload').uploadify('settings','buttonText','继续上传');
		}


		//返回按钮
		function returnBtnText() {
		    alert('The button says ' + $('#file_upload').uploadify('settings','buttonText'));
		}
	</script>
	<h4>操作:</h4> 
	<a href="javascript:$('#file_upload').uploadify('upload', '*');">开始上传</a> &nbsp;|&nbsp;
	<a href="javascript:$('#file_upload').uploadify('cancel', '*');">清除队列</a> &nbsp;|&nbsp;
	<a href="javascript:$('#file_upload').uploadify('destroy');">销毁上传</a> &nbsp;|&nbsp;
	<a href="javascript:$('#file_upload').uploadify('disable', true);">禁用上传</a> &nbsp;|&nbsp;
	<a href="javascript:$('#file_upload').uploadify('disable', false);">激活上传</a> &nbsp;|&nbsp;
	<a href="javascript:$('#file_upload').uploadify('stop');">停止上传</a> &nbsp;|&nbsp;
	<a href="javascript:changeBtnText();">变换按钮</a> &nbsp;|&nbsp;
	<h4>大小:</h4>
	<div id='progress'></div> 
</body>
</html>

 

分享到:
评论

相关推荐

    HTML5 PHP jquery uploadify上传文件

    HTML5 PHP jquery uploadify上传文件,带进度条,author:吕大豹。仿照uploadify写的,www.codesc.net已做过修正,本例的配置参数均与uploadify官网一致,参照官网的api就可以了,直接把文件夹上传到支持php的服务器...

    uploadify上传文件HTTP ERROR

    "uploadify上传文件HTTP ERROR"这个标题指向了一个特定的问题,即用户在尝试使用Uploadify插件进行文件上传时遇到了HTTP错误。Uploadify是一款流行的JavaScript插件,它允许用户通过异步方式上传文件到服务器,提供...

    uploadify多文件上传例子代码

    当uploadify上传文件时,会发送多个HTTP请求,每个请求对应一个文件。在doPost方法中,你可以通过Part接口来接收并处理这些文件。例如: ```java protected void doPost(HttpServletRequest request, ...

    Struts2+uploadify上传文件

    Struts2和Uploadify是两种在Web开发中用于文件上传的技术。...以上就是关于"Struts2+uploadify上传文件"的知识点详解,希望对你的学习有所帮助。在实际开发中,结合这两个工具可以实现高效、灵活的文件上传功能。

    jquery-java-ajax-uploadify上传文件

    在IT行业中,前端开发经常会遇到文件上传的需求,而"jquery-java-ajax-uploadify上传文件"是一个经典的方法,结合了JavaScript库jQuery、Ajax技术以及Uploadify插件来实现这一功能。在这个过程中,我们将深入探讨...

    使用Jquery.uploadify上传文件(JAVA版)

    使用Jquery.uploadify上传文件。 jquery有很多插件,其中也有不少上传文件的插件,像ajaxfileupload.js、uploadify.js,不过网上的例子几乎全是php的,很郁闷,研究了半天,终于把uploadify用jsp版本弄出来了

    MVC4下对话框中使用Uploadify上传多个文件

    6. **处理上传结果**:在`onUploadSuccess`事件中,我们可以根据后端返回的数据更新页面,例如显示已上传文件的列表。 至此,我们完成了在MVC4中使用JQuery Dialog和Uploadify进行多文件上传的基本流程。请注意,...

    使用uploadify上传文件

    此外,Uploadify还支持多种自定义设置,例如限制上传文件类型、大小、更改按钮文本等,这为我们提供了高度的灵活性来适应不同的项目需求。 总结来说,Uploadify是一个强大的jQuery文件上传插件,能够帮助开发者实现...

    spring mvc uploadify上传文件

    此外,需要确保上传文件的安全性,防止恶意文件上传,例如检查文件扩展名、执行文件内容扫描等。 ### 7. 性能优化 对于大量文件上传,可以考虑使用异步处理、分片上传、多线程等方式提高上传性能。同时,合理配置...

    C# uploadify文件上传.zip

    在C#编程环境中,Uploadify是一个非常流行的JavaScript库,它与服务器端的C#代码结合,用于实现用户友好的文件上传功能。这个压缩包“C# uploadify文件上传.zip”很可能是包含了一个完整的示例项目,帮助开发者了解...

    Grails结合uploadify上传文件的简单代码

    uploadify则是一个JavaScript库,它允许用户通过异步方式上传文件,提供友好的用户体验。 首先,我们需要在Grails项目中引入uploadify。这通常涉及到在`build.gradle`或`Config.groovy`文件中添加对应的依赖。对于...

    jquery.uploadify上传文件

    在网页开发中,用户经常需要上传文件,例如图片、文档等。jQuery Uploadify是一款强大的JavaScript插件,它允许用户通过异步方式实现多文件的同时上传,极大地提升了用户体验。这个插件以其易用性、自定义性和高效的...

    PHP+UploadiFy批量上传文件

    避免恶意文件上传,如通过检查文件头、限制上传文件类型、使用白名单等方法。 6. **优化性能**:对于大量文件上传,可能需要考虑分批处理,使用异步队列,或者使用多线程上传以提高效率。 总结起来,使用PHP和...

    Uploadify上传文件方法

    以下是对Uploadify上传文件方法及其在ASP.NET中的使用的详细说明: 1. **Uploadify基本使用** - 首先,你需要在HTML页面中引入jQuery库、jQuery EasyUI(可选,用于美化界面)以及Uploadify的JavaScript和CSS文件...

    jQuery uploadify上传文件(JAVA版+Struts2即时预览效果)

    首先,jQuery uploadify是一款优秀的前端文件上传插件,它允许用户通过Ajax方式异步上传文件,提供了友好的用户体验,如进度条显示、多文件上传等。然而,官方提供的示例主要是基于PHP的,对于Java开发者来说,寻找...

    jquery文件上传插件 jquery.uploadify.js 不支持IE10现在经过修改

    在IT行业中,jQuery Uploadify.js是一款非常流行的前端文件上传插件,它允许用户通过异步方式上传文件到服务器,提供了一种友好的用户体验。然而,随着浏览器版本的更新,一些较旧的插件可能不再兼容新的浏览器,...

    Uploadify上传文件

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示,可多文件上传

    Java调用uploadify实现文件上传Demo实现

    Java调用uploadify实现文件上传Demo实现,文档参见:http://www.mbaike.net/java/1940.html

Global site tag (gtag.js) - Google Analytics