jQ AJAX文件上传表单js代码

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

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

以下是 jQ AJAX文件上传表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jQ AJAX文件上传表单 </title>
		<!-- Google web fonts -->
		<!--<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />-->

		<!-- The main CSS file -->
		<link href="assets/css/style.css" rel="stylesheet" />
	</head>

	<body>

		<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
			<div id="drop">
				Drop Here

				<a>Browse</a>
				<input type="file" name="upl" multiple />
			</div>

			<ul>
				<!-- The file uploads will be shown here -->
			</ul>

		</form>

        
		<!-- JavaScript Includes -->
		<script src="jquery-1.9.1.js"></script>
		<script src="assets/js/jquery.knob.js"></script>

		<!-- jQuery File Upload Dependencies -->
		<script src="assets/js/jquery.ui.widget.js"></script>
		<script src="assets/js/jquery.iframe-transport.js"></script>
		<script src="assets/js/jquery.fileupload.js"></script>
		
		<!-- Our main JS file -->
		<script src="assets/js/script.js"></script>


		<!-- Only used for the demos. Please ignore and remove. --> 
        <script src="v1.js" async></script>
	</body>
</html>

JS代码(v1.js):

jQuery(function($){
	return;
	// AdPacks CSSvar css = '\#bsaHolder{
	right:25px;
	position:absolute;
	top:0;
	width:345px;
	z-index:10;
}
\#bsaHolder span{
	text-shadow:1px 1px 0 #fff;
}
\#bsap_aplink,\#bsap_aplink:visited{
	bottom:10px;
	color:#aaa;
	font:11px arial,sans-serif;
	position:absolute;
	right:14px;
	border:none;
}
\#bsaHolder .bsa_it_p{
	display:none;
}
\#bsaHolder .bsa_it_ad{
	background:-moz-linear-gradient(#F3F3F3,#FFFFFF,#F3F3F3) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear,0% 0%,0% 100%,color-stop(0,#f3f3f3),color-stop(0.5,#fff),color-stop(1,#f3f3f3));
	background-color:#f4f4f4;
	\border-color:#fff;
	overflow:hidden;
	padding:10px 10px 0;
	-moz-box-shadow:0 0 2px #999;
	-webkit-box-shadow:0 0 2px #999;
	box-shadow:0 0 2px #999;
	\-moz-border-radius:0 0 4px 4px;
	-webkit-border-radius:0 0 4px 4px;
	border-radius:0 0 4px 4px;
}
\#bsaHolder img{
	display:block;
	border:none;
}
\#bsa_closeAd{
	width:15px;
	height:15px;
	overflow:hidden;
	position:absolute;
	top:10px;
	right:11px;
	border:none !important;
	z-index:1;
	\text-decoration:none !important;
	background:url("http://tutorialzine.com/misc/enhance/x_icon.png") no-repeat;
}
\#bsa_closeAd:hover{
	background-position:left bottom;
}
\';
	addStyle(css);
	// The add placeholder$('body').prepend('<div id="bsaHolder"><a id="bsa_closeAd" title="Hide this ad!" href=""></a></div>');
	$('#bsa_closeAd').click(function(){
	$(this).parent().remove();
	return false;
}
);
	// The ad packs include scriptvar adPacks = document.createElement('script');
	adPacks.id = '_adpacks_js';
	adPacks.type = 'text/javascript';
	adPacks.async = true;
	adPacks.src = 'http://cdn.adpacks.com/adpacks.js?legacyid=1259038&zoneid=1386&key=fe75131c335e3bd42585d699208c59c8&serve=C6SI42Y&placement=tutorialzinecom&circle=dev';
	document.getElementById('bsaHolder').appendChild(adPacks);
	// Show the sharing buttonssetTimeout(function(){
	var twitter = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url={
	URL}
&amp;
	via=tutorialzine&amp;
	count=horizontal" ></iframe>';
	var facebook = '<iframe src="http://www.facebook.com/plugins/like.php?href={
	URL}
&amp;
	layout=button_count&amp;
	show_faces=false&amp;
	width=450&amp;
	action=like&amp;
	colorscheme=light&amp;
	height=21" scrolling="no" frameborder="0" allowtransparency="true"></iframe>';
	var URL = $('#tzine-download').attr('href');
	URL = encodeURIComponent(URL);
	$('#tzine-actions').prepend(twitter.replace('{
	URL}
',URL)) .prepend(facebook.replace('{
	URL}
',URL));
}
,2500);
	// Helper functionsfunction addStyle(str){
	var style = document.createElement('style');
	style.setAttribute("type","text/css");
	if (style.styleSheet){
	// IEstyle.styleSheet.cssText = str;
}
else{
	// the worldstyle.appendChild(document.createTextNode(str));
}
jQuery('head').append(style);
	$('html').css('background-attachment','scroll');
}
}
);

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