uploadify 文件上传实例

最新推荐文章于 2021-03-11 11:23:07 发布

最新推荐文章于 2021-03-11 11:23:07 发布 · 130 阅读

文章标签：

#jQuery #JavaScript #Struts #CSS #Apache #ViewUI

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用Uploadify插件实现文件上传功能，包括插件的安装与配置过程，并展示了具体的HTML与JavaScript代码实现细节。

插件官方地址 http://www.uploadify.com/
下载解压获得：cancel.png、jquery.uploadify.v2.1.0.js、swfobject.js、uploadify.css、uploadify.swf
放到 webRoot/js/uploadify 下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Upload</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	
	<link rel="stylesheet" type="text/css" href="<%=basePath %>js/uploadify/uploadify.css"/>
	<script type="text/javascript" src="<%=basePath %>js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/uploadify/swfobject.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/uploadify/jquery.uploadify.v2.1.0.js"></script> 
	
	<script type="text/javascript">
        $(document).ready(function() {
            $("#file").uploadify({
                /*注意前面需要书写path的代码*/
                'uploader'       : '<%=basePath%>js/uploadify/uploadify.swf',
                'script'         : '<%=basePath%>UploadAction.do',
                'cancelImg'      : '<%=basePath%>js/uploadify/cancel.png',
                'queueID'        : 'fileQueue', //和存放队列的DIV的id一致
                'fileDataName'   : 'file', //和以下input的name属性一致
                'auto'           : false, //是否自动开始
                'multi'          : false, //是否支持多文件上传
                'buttonText'     : 'Browse', //按钮上的文字
                'simUploadLimit' : 1, //一次同步上传的文件数目
                'sizeLimit'      : 19871202, //设置单个文件大小限制
                'queueSizeLimit' : 1, //队列中同时存在的文件个数限制
                'fileDesc'       : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性，那么这个属性是必须的
                'fileExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式  
		        onComplete: function (event, queueID, fileObj, response, data) {
					$('<li></li>').appendTo('.files').text(response);
				},
				onError: function(event, queueID, fileObj) {
					alert("文件:" + fileObj.name + "上传失败");
				},
				onCancel: function(event, queueID, fileObj){
					alert("取消了" + fileObj.name);
				}
            });
        });
        
        function uploadifyUpload(){
			$('#file').uploadifyUpload();
		}
    </script>
  </head>
  
  <body>
	<table>
		<tr>
			<td class="title">图片文件<span class="ff0000"> *</span></td>
			<td colspan="3">
				<input type="file" name="file" id="file" />
				<div id="fileQueue"></div>
				<p>
					<a href="javascript:;" onClick="javascript:uploadifyUpload()">开始上传</a>&nbsp;
					<a href="javascript:jQuery('#file').uploadifyClearQueue()">取消所有上传</a>
				</p>
				<ol class=files></ol>
			</td>
		</tr>
	</table>
  </body>
</html>

package com.hw.msds.base.util;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import com.hw.msds.base.struts.BaseAction;

public class UploadAction extends BaseAction {
	@Override
	public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		// 省略文件上传代码
		// ...
		printResponseText(response, "上传成功");//向页面端返回结果信息
		return null;
	}
}