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

時間 2020-02-12

標籤 jsp+ssh jsp ssh jquery uploadify 用法異步上傳插件支持欄目 JSP 简体版

原文原文鏈接

<%@ 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" 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')">上傳圖片</a> <a
			href="javascript:$('#file_upload').uploadify('cancel')">取消上傳</a>
</body>
</html>

/upload.action 是用的上一篇博客的upload 方法，不過返回一個null值，將返回的數據要存到reponse中 javascript