Skip to content

Instantly share code, notes, and snippets.

@chzyer
Last active December 10, 2015 22:48
Show Gist options
  • Save chzyer/4504575 to your computer and use it in GitHub Desktop.
Save chzyer/4504575 to your computer and use it in GitHub Desktop.
Uploadify即开即用DEMO

在网上找了很久都没有找到可以现套现用的DEMO,官方提供下载的ZIP里面却没有示例,无奈,只能从官网上找到DEMO,一步一步精简

<link href="uploadify/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="uploadify/jquery.min.js"></script>
<script type="text/javascript" src="uploadify/swfobject.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
<body >
<div id="basic-demo" class="demo">

<script type="text/javascript">
$(function() {
	$('#file_upload').uploadify({
		'uploader' : 'uploadify/uploadify.swf',
		'script' : 'uploadify/uploadify.php',
		'cancelImg' : 'uploadify/cancel.png',
	});
});
</script>

<div class="demo-box">
<input id="file_upload" type="file" name="Filedata" />
<p><a href="javascript:$('#file_upload').uploadifyUpload()">Upload Files</a></p> 
</div>
</div>

将下载的东东放到uploadify目录就行了 还缺一个style.css

#basic-demo .uploadifyQueueItem {
	background-color: #F5F5F5;
	border: 2px solid #E5E5E5;
	font: 11px Verdana, Geneva, sans-serif;
	margin-top: 5px;
	padding: 10px;
	width: 350px;
}

#basic-demo .uploadifyError {
	background-color: #FDE5DD !important;
	border: 2px solid #FBCBBC !important;
}

#basic-demo .uploadifyQueueItem .cancel {
	float: right;
}

#basic-demo .uploadifyQueue .completed {
	background-color: #E5E5E5;
}

#basic-demo .uploadifyProgress {
	background-color: #E5E5E5;
	margin-top: 10px;
	width: 100%;
}

#basic-demo .uploadifyProgressBar {
	background-color: #0099FF;
	height: 3px;
	width: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment