uploadify上传小札记【jsp版本】【亲测有效】

注意，我是用Spring的上传类MultipartHttpServletRequest来作为服务器端接收处理，apache的请自行尝试！

MultipartHttpServletRequest的配置在这里就不讲了。请各位自觉去搜索引擎查找相关配置，很容易的！

现在讲正文:

第1步:到 http://www.uploadify.com/ 去下载 最新版本uploadify-v*.*.*.zip，或【点此下载】下载后解压，只要除com文件夹外的其它文件，将这些文件放到项目WebRoot任意文件夹下！

第2步：在上传页引用以下css及js，注意路径根据文件夹在项目的位置

<link rel="stylesheet" href="uploadify-v2.1.4/uploadify.css" type="text/css"></link>
<script type="text/javascript" src="uploadify-v2.1.4/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="uploadify-v2.1.4/swfobject.js"></script>
<script type="text/javascript" src="uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js"></script>

第3步：编写上传控件代码

<script type="text/javascript">
            $(document).ready(function() {
                $("#uploadify").uploadify({
                    'uploader' : 'uploadify-v2.1.4/uploadify.swf',
                    'script' : '<%=request.getContextPath()%>/upload.do',//后台处理的请求
                    'cancelImg' : 'uploadify-v2.1.4/cancel.png',
                    'fileDataName':'myfile',//服务器端根据这个接收文件
                    'queueID' : 'fileQueue',//与下面的id对应
                    'queueSizeLimit' : 1,
                    'fileDesc' : '任意文件',
                    'fileExt' : '*.*', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
                    'auto' : false,
                    'multi' : true,
                    'simUploadLimit' : 2,
                    'buttonText' : 'BROWSE',
                    'onError' : function(event, queueID, fileObj, errorObj) {
                        alert(" 上传失败" + errorObj.info + "错误类型" + errorObj.type);
                    },
                    'onComplete' : function(event, queueID, fileObj, response, data) {
                        alert(response);
                    }
                });
        
            });
        </script>

第4步：编写html标签

<div id="fileQueue"></div>
<input type="file" name="uploadify" id="uploadify" /><br/>
<a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|
<a href="javascript:$('#uploadify').uploadifyClearQueue()"> 取消上传</a>

第5步：编写后台接收代码

package com.tg.module.media.controller;

import java.io.File;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import com.tg.exception.DataExistenceException;

@Controller
@RequestMapping
public class AController {
    @RequestMapping("/upload.do")
    public void fileUpload(HttpServletRequest request, HttpServletResponse response) {

    String savePath = "F:\\uploads\\";
    MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
    MultipartFile mfile1 = multipartRequest.getFile("myfile");//注意这里要同第3步中fileDataName 的值相同 
    if (mfile1.getSize() == 0) {
        response.getWriter().print("文件不存在！");
    } else {
        File file=new File(savePath+mfile1.getOriginalFilename());
        try {
        mfile1.transferTo(file);
        response.getWriter().print("上传成功!");
        } catch (Exception e) {
        try {
            response.getWriter().print("上传失败!错误代码:"+e.getMessage());
        } catch (IOException e1) {
            e1.printStackTrace();
        }
        }
    }
    }
}

上传效果:

1

2

3

如需更改其它属性，请至google搜索相关内容！