JFinal+WebUploader實現圖片的異步上傳

關於WebUploader

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5爲主，FLASH爲輔的現代文件上傳組件。
界面友好，使用方便，稍作修改，可快速上手。
官網：http://fex.baidu.com/webuploader/

如何使用webuploader

到官網去下載完整的源代碼包，如圖

解壓之後只需要這三個文件夾下的文件資源，如圖

在項目根目錄路徑下新建文件夾webuploader-0.1.5，然後將需要的文件資源拷貝到該文件夾下，如圖

注意上傳圖片只需要使用到這些資源

另外需要用到的包和資源

js文件：
jquery.js（需要jQuery的支持）

外部包：
jfinal-2.0-bin-with-src.jar（JFinal核心包）
fastjson-1.2.7-sources.jar和fastjson-1.2.7.jar（用於json數據的處理）
cos-26Dec2008.jar（支持JFinal自帶的上傳功能）

源代碼說明

上傳的JSP頁面代碼

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>首頁</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<!--引入CSS-->
<link rel="stylesheet" type="text/css"
    href="${contextPath}/tools/webuploader-0.1.5/webuploader.css">
<link rel="stylesheet" type="text/css" href="${contextPath}/tools/webuploader-0.1.5/image-upload/style.css" />

</head>

<body>
    <div id="wrapper">
        <div id="container">
            <!--頭部，相冊選擇和格式選擇-->

            <div id="uploader">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <p>或將照片拖到這裏，單次最多可選300張</p>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">開始上傳</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--引入JS-->
    <script type="text/javascript"
        src="${contextPath}/tools/webuploader-0.1.5/image-upload/jquery.js"></script>
    <script type="text/javascript"
        src="${contextPath}/tools/webuploader-0.1.5/webuploader.min.js"></script>
    <script type="text/javascript"
        src="${contextPath}/tools/webuploader-0.1.5/image-upload/upload.js"></script>
</body>
</html>

頁面代碼直接複製粘貼給的例子裏面HTML頁面的代碼，導入相應的js和css文件就OK了，注意導入文件的路徑要正確

處理上傳的upload.js文件代碼
引入文件後，只需要修改image-upload文件夾下面的upload.js文件即可，如圖

需要修改的地方有兩處

實例化代碼：

// 實例化，此處按功能需要進行修改
        uploader = WebUploader.create({
            pick: {   //指定選擇文件的按鈕容器
                id: '#filePicker',
                label: '點擊選擇圖片'
            },
            formData: {   //文件上傳請求的參數表，每次發送都會發送此對象中的參數
                uid: 123
            },
            dnd: '#dndArea',
            paste: '#uploader',
            swf: 'tools/webuploader-0.1.5/Uploader.swf',    //根據swf路徑不同進行修改
            chunked: false,   //true爲開啓分片上傳
            chunkSize: 512 * 1024,
            server: 'upload/imageUpload',   //向服務器發送請求的路徑

            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },

            // 禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片打開。
            disableGlobalDnd: true,
            fileNumLimit: 300,   //最多上傳300張
            fileSizeLimit: 200 * 1024 * 1024,    // 200 M ,驗證文件總大小是否超出限制, 超出則不允許加入隊列
            fileSingleSizeLimit: 5 * 1024 * 1024    // 5 M ,驗證單個文件大小是否超出限制, 超出則不允許加入隊列
        });

注意向服務器發送請求的路徑即爲JFianl處理文件上傳的函數路由，在這裏是upload/imageUpload

ajax異步提交路徑：

$.ajax('tools/webuploader-0.1.5/server/preview.php', {
                            method: 'POST',
                            data: src,
                            dataType:'json'
                        }).done(function( response ) {
                            if (response.result) {
                                img = $('<img src="'+response.result+'">');
                                $wrap.empty().append( img );
                            } else {
                                $wrap.text("預覽出錯");
                            }
                        });

路徑根據你的preview.php所在的項目路徑填寫

若要獲取服務器所返回的json數據，可在upload.js文件的函數中添加如下代碼

 /*獲取服務器返回的數據*/
        uploader.on( 'uploadAccept', function( file, response ) {
           if(response.status == "success")
               alert("文件保存路徑："+response.filePath);
           else if(response.status == "error")
               alert(response.error);
        });

在配置文件RouteConfig.java配置代碼如下

package org.dny.config;

import org.dny.controller.HomeController;
import org.dny.controller.UploadController;
import org.dny.utils.CommonUtils;

import com.jfinal.config.Constants;
import com.jfinal.config.Handlers;
import com.jfinal.config.Interceptors;
import com.jfinal.config.JFinalConfig;
import com.jfinal.config.Plugins;
import com.jfinal.config.Routes;
import com.jfinal.core.Const;
import com.jfinal.ext.handler.ContextPathHandler;
import com.jfinal.kit.PathKit;
import com.jfinal.kit.PropKit;
import com.jfinal.render.ViewType;

/**
 * 
 * @author Dny
 * 
 */
public class RouteConfig extends JFinalConfig {

    public final static String relativePath = "upload/images/"
            + CommonUtils.getCurrentDate();   //相對路徑
    public final static String absolutePath = PathKit.getWebRootPath() + "/"
            + relativePath;

    @Override
    public void configConstant(Constants me) {
        /*
         * PropKit 可同時加載多個配置文件， 第一個被加載的配置文件可以使用PorpKit.get(…)方法直接操作,
         * 非第一個被加載的配置文件則需要使用 PropKit.use(…).get(…)來操作
         */
        PropKit.use("db_config.txt"); // 加載數據庫配置信息
        // 在開發模式下，JFinal 會對每次請求輸出報告，如輸出本次請求的 Controller、Method 以及請求所攜帶的參數
        me.setEncoding("utf-8");
        me.setDevMode(PropKit.getBoolean("devMode", true));
        me.setViewType(ViewType.JSP);

        me.setUploadedFileSaveDirectory(absolutePath);// 文件上傳保存路徑
        me.setMaxPostSize(1 * Const.DEFAULT_MAX_POST_SIZE);// 上傳文件最大爲10M
    }

    @Override
    public void configRoute(Routes me) { // 配置路由,路線
        /*
         * 第一個參數 controllerKey 是指訪問某個 Controller 所需要的一個字符串，該字符串唯一對應一個
         * Controller，controllerKey 僅能定位到 Controller。 第二個參數 controllerClass
         * 是該controllerKey 所對應到的 Controller。 第三個參數 viewPath 是指該 Controller
         * 返回的視圖的相對路徑
         */
        me.add("/", HomeController.class, "/page/common");
        me.add("/upload", UploadController.class, "page/upload");
    }

    @Override
    public void configPlugin(Plugins me) {
    }

    @Override
    public void configInterceptor(Interceptors me) {

    }

    @Override
    public void configHandler(Handlers me) {
        me.add(new ContextPathHandler("contextPath")); // 設置上下文路徑
    }

}

處理文件上傳的UploadController.java代碼如下

package org.dny.controller;

import java.io.File;

import org.dny.config.RouteConfig;
import org.dny.utils.CommonUtils;

import com.alibaba.fastjson.JSONObject;
import com.jfinal.core.Controller;
import com.jfinal.upload.UploadFile;

public class UploadController extends Controller {

    private static int imgCount = 0;

    public void imageUpload() {
        UploadFile uploadFile = getFile();

        JSONObject jsonObject = new JSONObject();

        if (uploadFile != null) {
            String fileName = uploadFile.getFileName();
            String extentionName = fileName.substring(fileName
                    .lastIndexOf(".")); // 後綴名

            if (imgCount > 300)// 300爲文件上傳最大數目
                imgCount = 0;

            String newName = CommonUtils.getCurrentTime() + "_" + imgCount
                    + extentionName;// 新名
            imgCount++;

            String filePath = RouteConfig.absolutePath + "/" + newName;// 文件完整路徑
            uploadFile.getFile().renameTo(new File(filePath)); // 重命名並上傳文件

            //返回任意數據即代表上傳成功
            jsonObject.put("filePath", filePath);
            jsonObject.put("status", "success");
        }else {
            //返回任意數據即代表上傳成功
            jsonObject.put("error", "未選擇文件");
            jsonObject.put("status", "error");
        }

        renderJson(jsonObject.toJSONString());
    }
}

以當前日期和時間命名文件夾和上傳的圖片，獲取當前日期的的工具類如下

package org.dny.utils;

import java.text.SimpleDateFormat;
import java.util.Date;

public class CommonUtils {
    /** 默認的格式化方式 */
    private static final String defaultFormat = "yyyy-MM-dd HH:mm:ss";

    public static String getDate() {
        SimpleDateFormat dateFormat = new SimpleDateFormat(
                "yyyy-MM-dd HH:mm:ss");
        Date currentDate = new Date();
        String formatCurrentDate = dateFormat.format(currentDate).toString();

        return formatCurrentDate;
    }

    public static String getCurrentDate() {
        String format = "yyyy-MM-dd";
        Date date = new Date();
        date.setTime(System.currentTimeMillis());
        if (format == null || "".equals(format.trim())) {
            format = defaultFormat;
        }
        SimpleDateFormat sdf = new SimpleDateFormat(format);
        return sdf.format(date);
    }

    public static String getCurrentTime() {
        String format = "yyyyMMddHHmmss";
        Date date = new Date();
        date.setTime(System.currentTimeMillis());
        if (format == null || "".equals(format.trim())) {
            format = defaultFormat;
        }
        SimpleDateFormat sdf = new SimpleDateFormat(format);
        return sdf.format(date);
    }

}

運行結果

項目包下載

http://download.csdn.net/detail/u013539342/9423479

參考鏈接

感謝前輩們的付出，我只是個搬運工+擴展者
參考地址：
http://download.csdn.net/detail/u011470552/9354107

JFinal+WebUploader實現圖片的異步上傳

關於WebUploader

如何使用webuploader

另外需要用到的包和資源

源代碼說明

運行結果

項目包下載

參考鏈接

C++中的Date類（日期類）

JFinal+ajaxfileupload實現圖片的異步上傳

Java中的初始化順序

一臺電腦安裝兩個版本的MyEclipse

">

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結