Uploadify 在线实例Demo演示

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
		<link rel="stylesheet" type="text/css" href="//ku.shouce.ren/libs/uploadify/uploadify.css" />
		<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
		</script>
		<script type="text/javascript" src="//ku.shouce.ren/libs/uploadify/jquery.uploadify.js">
		</script>
	</head>
	<body>
		<div class="main">
			<form>
				<div id="queue">
				</div>
				<input id="file_upload" name="file_upload" type="file" multiple="true">
			</form>
			<div id="uploadfiles">
			</div>			
			<div id="fileQueue" style="clear:both">
			</div>
			<script type="text/javascript">
				var timestamp=new Date().getTime();
				var token=Math.floor(Math.random()*1000)+timestamp;
				$(function() {
					$('#file_upload').uploadify({
						'buttonText': '选择文件..',
						'fileObjName': 'simplefile',
						'method': 'post',
						'multi': true,
						'queueID': 'fileQueue',
						//'uploadLimit': 2,
						'fileSizeLimit':'512KB',
						'fileTypeExts': '*.gif;*.png;*.jpg;*.bmp;*.jpeg;',//本实例服务端限制只有图片才能上传，所有这里修改别的文件格式也不会真正上传
						'buttonImage': '/static/js/uploadify/select.png',
						'formData'     : {
							'timestamp' : timestamp,
							'token'     : token
						}
						,
						'swf': '/static/js/uploadify/uploadify.swf',
						'uploader' : '/static/php/UploaderDemo.php',
						'onUploadStart': function () {
							$imgHtml = '<img class="upload_load" src="/static/images/upload.gif" align="absmiddle" />';
							$('#uploadfiles').append($imgHtml);
						}
						,
						'onUploadSuccess': function(file, data, response) {
							$('.upload_load').remove();
							var json = $.parseJSON(data);
							if (json.state == 'success') {
								$imgHtml ='<span id="file_'+json.file_id+'">';
								$imgHtml += '<a href="'+ json.file + '" target="_blank">';
								$imgHtml += '<img src="'+json.file+'" width="100" height="100"  align="absmiddle"/>';
								$imgHtml += '</a>';
								$imgHtml += '<a href="javascript:uploadifyRemove(&quot;' + json.file + '&quot;)">删除</a>';
								$imgHtml +='</span>';
								$($imgHtml).appendTo('#uploadfiles');
							}
							else {
								alert(json.message);
							}
						}
						,
						'onQueueComplete':function () {
							$('.upload_load').remove();
						}
					}
											   );
				}
				 );
				//删除文件
				function uploadifyRemove(filePath){
					if(confirm('确定要删除吗？')){
						$.post("/static/php/UploaderDemo.php?action=del",{
							filePath:filePath}
							   ,function(res){
							$('a[href="'+res+'"]').parent().remove();
						}
							  );
					}
				}
			</script>
		</div>
	</body>
</html>

​x
 
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <link rel="stylesheet" type="text/css" href="//ku.shouce.ren/libs/uploadify/uploadify.css" />
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script type="text/javascript" src="//ku.shouce.ren/libs/uploadify/jquery.uploadify.js">
        </script>
    </head>
    <body>
        <div class="main">
            <form>
                <div id="queue">
                </div>
                <input id="file_upload" name="file_upload" type="file" multiple="true">
            </form>
            <div id="uploadfiles">
            </div>          
            <div id="fileQueue" style="clear:both">
            </div>
            <script type="text/javascript">