(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