AjaxUpload上傳控件、JQuery控件

AjaxUpload上傳控件，使用該控件可以實現帶進度條的上傳。
ajaxfileupload.js

//String retxt ="{error:'',\n msg:'success'\n}";  調用該插件，返回字符串格式
//response.getWriter().print(retxt);   jsp代碼

jQuery.extend({
    createUploadIframe: function (id, uri) {
        //創建 frame
        var frameId = 'jUploadFrame' + id;
        var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
        if (window.ActiveXObject) {
            if (typeof uri == 'boolean') {
                iframeHtml += ' src="' + 'javascript:false' + '"';
            }
            else if (typeof uri == 'string') {
                iframeHtml += ' src="' + uri + '"';
            }
        }
        iframeHtml += ' />';
        jQuery(iframeHtml).appendTo(document.body);
        return jQuery('#' + frameId).get(0);
    },
    createUploadForm: function (id, fileElementId, data) {
        //創建 frame    
        var formId = 'jUploadForm' + id;
        var fileId = 'jUploadFile' + id;
        var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
        if (data) {
            for (var i in data) {
                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
            }
        }
        var oldElement = jQuery('#' + fileElementId);
        var newElement = jQuery(oldElement).clone();
        jQuery(oldElement).attr('id', fileId);
        jQuery(oldElement).before(newElement);
        jQuery(oldElement).appendTo(form);

        //設置屬性
        jQuery(form).css('position', 'absolute');
        jQuery(form).css('top', '-1200px');
        jQuery(form).css('left', '-1200px');
        jQuery(form).appendTo('body');
        return form;
    },

    ajaxFileUpload: function (s) {
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime();
        var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data));
        var io = jQuery.createUploadIframe(id, s.secureuri);
        var frameId = 'jUploadFrame' + id;
        var formId = 'jUploadForm' + id;
        // 監控請求
        if (s.global && !jQuery.active ++) {
            jQuery.event.trigger("ajaxStart");
        }
        var requestDone = false;
        // 創建請求對象
        var xml = {};
        if (s.global)
            jQuery.event.trigger("ajaxSend", [xml, s]);
        //等待一個響應返回
        var uploadCallback = function (isTimeout) {
            var io = document.getElementById(frameId);
            try {
                if (io.contentWindow) {
                    xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
                    xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;

                } else if (io.contentDocument) {
                    xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
                    xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
                }
            } catch (e) {
                //alert("666666");
                jQuery.handleError(s, xml, null, e);
            }
            if (xml || isTimeout == "timeout") {
                requestDone = true;
                var status;
                try {

                    status = isTimeout != "timeout" ? "success" : "error";

                    //請求成功
                    if (status != "error") {

                        // 處理數據 //根據傳送的type類型，返回json對象，此時返回的data就是後臺操作後的返回結果
                        var data = jQuery.uploadHttpData(xml, s.dataType);
                        if (s.success)
                            s.success(data, status);
                        // 觸發全局返回
                        if (s.global){
                            jQuery.event.trigger("ajaxSuccess", [xml, s]);
                        }                            
                        //alert("if");
                    } else{
                        jQuery.handleError(s, xml, status);
                    }

                } catch (e) {
                    //alert("777777");
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                }

                // 請求完成
                if (s.global)
                    jQuery.event.trigger("ajaxComplete", [xml, s]);

                // 處理全局AJAX計數器
                if (s.global && ! --jQuery.active)
                    jQuery.event.trigger("ajaxStop");

                // 處理結果
                if (s.complete)
                    s.complete(xml, status);

                jQuery(io).unbind();

                setTimeout(function () {
                    try {
                        jQuery(io).remove();
                        jQuery(form).remove();

                    } catch (e) {
                        //alert("888888");
                        jQuery.handleError(s, xml, null, e);
                    }

                }, 100);

                xml = null;

            }
        }
        // 超時檢查
        if (s.timeout > 0) {
            setTimeout(function () {
                if (!requestDone) 
                    uploadCallback("timeout");
            }, s.timeout);
        }
        try {

            var form = jQuery('#' + formId);
            jQuery(form).attr('action', s.url);
            jQuery(form).attr('method', 'POST');
            jQuery(form).attr('target', frameId);
            if (form.encoding) {
                jQuery(form).attr('encoding', 'multipart/form-data');
            }
            else {
                jQuery(form).attr('enctype', 'multipart/form-data');
            }
            jQuery(form).submit();

        } catch (e) {
            //alert("9999");
            jQuery.handleError(s, xml, null, e);
        }

        jQuery('#' + frameId).load(uploadCallback);
        return { abort: function () { } };

    },

    uploadHttpData: function (r, type) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        if (type == "script")
            jQuery.globalEval(data);
        if (type == "json")
            eval("data = " + data);
        if (type == "html")
            jQuery("<div>").html(data).evalScripts();
        return data;
    }
});

處理上傳操作的JS，由上傳按鈕的事件調用。接收參數爲服務器處理文件的jsp頁面或者註冊的服務，第二個參數爲上傳成功後需要顯示給用戶的反饋信息。
注：此函數也可以實現下載，只需將fileElementId引用的input控件的url指向服務器的某個能返回流的服務或者界面，就會在客戶端彈出下載界面。urlStr = input控件指向的文件名即可。

function ajaxFileUpload(urlStr,showMegStr) {
        var form = $("<form>"); 
        form.ajaxStart(function () {
                alert("上傳開始");//此處可以利用JS生成上傳的動畫
        });
        form.ajaxComplete(function () {             
                alert("上傳結束");
        });

        jQuery.ajaxFileUpload(
        {
                url: urlStr,                
                secureuri: false,
                fileElementId: 'upload_attach',
                dataType: 'json',
                data: { 'name': 'logan', 'id': 'id' },
                success: function (data, status) { //data後臺jsp返回結果，status  Ajaxfileupload控件返回的狀態
                    if (typeof (data.error) != '') {
                        if (data.error == '') {
                            alert(showMegStr);

                        } else {
                            alert("上傳文件格式不正確！");
                        }
                    }
                },
                error: function (data, status, e) {
                    alert(e);
                }
        });

        return true;
}

用戶界面：
selectFilePage.jsp

<html>
<head>
<title id="title"></title>
</head>
<body>

<!-- 標題欄 -->
    <div class='' id='filePageNagText'><span>瀏覽文件</span></div>  
<!-- 列表table -->


    <form id="form1"   name="form1" encType="multipart/form-data" method="post" target="hidden_frame">
        <div  id ="AttachDiv" >&nbsp;
        <input type="file" name="upload_attach" id="upload_attach" > &nbsp;
        <iframe name='hidden_frame' id="hidden_frame" style='display: none'></iframe>
        </div>
    </form>

</body>
</html>

後端處理上傳文件的JSP，接收文件流並寫入服務器本地磁盤

<%@ page import="java.io.*,java.util.*, javax.servlet.*" %>
<%@ page import="javax.servlet.http.*" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="org.apache.commons.io.output.*" %>
<%@ page import="inforunner.oatransmanager.PublicLib" %>
<%@ page import="inforunner.util.ConfigPathUtils" %>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Map"%>
<%

   int maxFileSize = 200 * 1024 * 1024;
   int maxMemSize = 200 * 1024 * 1024;
   ServletContext context = pageContext.getServletContext();
   Map<String, String > map = new HashMap();
    // String realPath = request.getRealPath("/platform/inforunner/TransUI/upload");
   String filePath = ConfigPathUtils.getEnvelopUploadPath(); //讀配置文件公文上傳目錄request.getRealPath("/platform/inforunner/TransUI/upload");
   //System.out.println("filePath="+filePath );
    String retXML= "";
   // 驗證上傳內容的類型
   String contentType = request.getContentType();

   File file = null;

   if ((contentType.indexOf("multipart/form-data") >= 0)) {

      DiskFileItemFactory factory = new DiskFileItemFactory();

      // 設置內存中存儲文件的最大值
      factory.setSizeThreshold(maxMemSize);

      // 本地存儲的數據大於 maxMemSize.
      //factory.setRepository(new File("c:\\temp"));


     // 創建一個新的文件上傳處理程序
      ServletFileUpload upload = new ServletFileUpload(factory);
      // 設置最大上傳的文件大小
      upload.setSizeMax( maxFileSize );
      try{ 
         // 解析獲取的文件
         List fileItems = upload.parseRequest(request);

         // 處理上傳的文件
         Iterator i = fileItems.iterator();


         while ( i.hasNext () ) 
         {
            FileItem fi = (FileItem)i.next();
            if ( !fi.isFormField () )   
            {
            // 獲取上傳文件的參數
            String fieldName = fi.getFieldName();
            String fileName = fi.getName();
            boolean isInMemory = fi.isInMemory();
            long sizeInBytes = fi.getSize();
            //檢查上傳文件夾是否存在，不存在就創建
            File uploadFile = new File(filePath);
            if (!uploadFile.exists() && !uploadFile.isDirectory()) {
                    uploadFile.mkdirs();
            }

            // 寫入文件
            if( fileName.lastIndexOf("\\") >= 0 ){
                file = new File( filePath , fileName.substring( fileName.lastIndexOf("\\"))) ;
            }else{
                file = new File( filePath , fileName.substring(fileName.lastIndexOf("\\")+1)) ;
            }



                fi.write( file ) ;
                map.put("msg","true" );
                map.put("error","" );
                System.out.println("Uploaded Filename: " + filePath + "/"   +fileName);
            }
         }
         //out.println("</body>");
         //out.println("</html>");
      }catch(Exception ex) {
         System.out.println(ex);
         map.put("msg","false" );
         map.put("error",ex.toString() );
     }
   }
    response.setStatus(200);  
    String retxt ="{error:'', msg:'success',fileName:''}";  //此處返回格式依據，ajaxfileupload.js插件
    response.getWriter().print(retxt);  
%>