天天看點

(jsp+ssh)jquery-uploadify 的用法(jquery異步上傳插件,支援多文...

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>上傳檔案</title>
<link href="/js/uploadify/uploadify.css" target="_blank" rel="external nofollow"  rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/uploadify/jquery.uploadify.js"></script>
<script type="text/javascript"
	src="/js/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#file_upload").uploadify({
			'swf' : '/js/uploadify/uploadify.swf',
			'uploader' : '/upload.action',//上傳的請求URL
			//'script' : '/upload.action',
			'method' : "post",
			'folder' : 'upload',//設定上傳檔案夾
			'cancelImage' : '/js/uploadify/uploadify-cancel.png',//設定取消的圖檔
			'displayData' : 'speed',//進度條的顯示方式
			'fileObjName' : 'file',//與背景Action中file屬性一樣
			// 'formData' : {'fileFileName' : 'file'},//附帶值
			'queueID' : 'fileQueue',
			'auto' : false,
			'multi' : true,//是否為多檔案上傳
			'button Text' : " 浏 覽 ",
			'simUploadLimit' : 20,//一次可以上傳多少個檔案
			'sizeLimit' : 999999999999,
			'queueSizeLimit' : 20,
			successTimeout:99999,//上傳逾時時間
			'fileTypeDesc' : '支援格式:jpg,gif,png,bmp',
			'fileTypeExts' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.xml;*.doc',
			'rollover' : true,
			'removeCompleted' : false,
			progressData:"percentage",//顯示上傳的百分比
			onComplete : function(evt, queueID, fileObj, response, data) {
				//alert("Successfully uploaded: "+fileObj.filePath);
				alert(response);
				//getResult(response);//獲得上傳的檔案路徑
			},
			//上傳到伺服器,伺服器傳回相應資訊到data裡
			onUploadSuccess:function(file, data, response){
			alert(response);
			alert(file);
			alert(data);
			},
			//選擇檔案時出錯
			onSelectError:function(file, errorCode, errorMsg){}
		//onError: function(errorObj) {
		//     alert(errorObj.info+"               "+errorObj.type);
		//}

		});
	});
</script>
</head>
<body>
	<!-- <form action="/upload.action" method="post"
		enctype="multipart/form-data">
		<input type="file" value="上傳檔案" id="file" name="file"> <input
			type="submit" value="确定">
	</form> -->

	<div id="fileQueue"></div>
	<input type="file" name="file" id="file_upload">
	<p>
		<a href="javascript:$('#file_upload').uploadify('upload')" target="_blank" rel="external nofollow" >上傳圖檔</a> <a
			href="javascript:$('#file_upload').uploadify('cancel')" target="_blank" rel="external nofollow" >取消上傳</a>
</body>
</html>                

/upload.action 是用的上一篇部落格的upload 方法,不過傳回一個null值,将傳回的資料要存到reponse中

版權聲明:本文為CSDN部落客「weixin_34380781」的原創文章,遵循CC 4.0 BY-SA版權協定,轉載請附上原文出處連結及本聲明。

原文連結:https://blog.csdn.net/weixin_34380781/article/details/92011019