Fine Uploader 简单配置方法

由于jquery.uploadify是基于flash的jquery上传控件，客户老是说出问题，所以今天换成了一个纯js的异步上传控件。

这方面的资料很少，故此记下来分享一下。

1.jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ page language="java" import="java.util.*"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Fine Uploader Demo</title>

    <link href="./plugins/jquery.fineuploader-3.7.1/fineuploader-3.7.1.min.css" rel="stylesheet"> <!-- 样式 -->

  </head>

  <body>

    <div id="jquery-wrapped-fine-uploader"></div>

    <div id="triggerUpload">上传</div>

     <script type="text/javascript" src="./plugins/jquery/jquery-1.7.min.js"></script> <!-- jquery -->

    <script src="./plugins/jquery.fineuploader-3.7.1/jquery.fineuploader-3.7.1.min.js"></script> <!-- Fine Uploader -->

    <script>

    $(document).ready(function () {

        $('#jquery-wrapped-fine-uploader').fineUploader({

          request: {

            endpoint: 'fineUpload.action'                           //处理文件上传的action

          },

          text: {

              uploadButton: '选择上传文件'                            //上传按钮的文字

          },

          multiple: false,                                           //是否为多文件上传

          validation: {

              allowedExtensions: ['apk', 'rar', 'zip',], //限制上传格式

              sizeLimit: 1024* 1024* 1024 * 1024 * 1024              //限制上传大小

          },

          autoUpload: false,                                         //是否自动提交

          editFilename: {                                            //编辑名字

              enable: true

          }

        }).on({                                                       //注册监听事件

            "complete": function(event, id, fileName, responseJSON) { //完成

                if(responseJSON.success) {

                    alert(responseJSON.success);

                }

            },

            "cancel": function(event, id,fileName){                   //取消

                alert(fileName);

            },
　　　　　　　"submit": function(event, id, fileName) {                 //选择文件后
　　　　　　　　　alert('文件选择');
　　　　　　　}

            "error": function(event, id, fileName, reason) {          //出错,这里还有些其他事件，我暂时不用就没实践，大家可以自己去看api

                alert(reason);

            }

        });

      });

       $("#triggerUpload").click(function() {                         //手动提交

           $('#jquery-wrapped-fine-uploader').fineUploader('uploadStoredFiles');

       });

    </script>

  </body>

</html>

这种配置方法是基于jquery的，官方还有基于原生js的。

2. struts2的action:

package cn.zyc.action;

import java.io.File;

import java.io.FileInputStream;

import java.io.FileNotFoundException;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import org.apache.struts2.convention.annotation.Action;

import cn.zyc.util.ActionUtil;

import com.opensymphony.xwork2.ActionSupport;

public class FineUploadTest extends ActionSupport{

    private File qqfile;             //上传文件的name,默认就是这个

    private String qqfileFileName;   //上传文件名

    HttpServletResponse response = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);

    HttpServletRequest request = (HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);

    public File getQqfile() {

        return qqfile;

    }

    public void setQqfile(File qqfile) {

        this.qqfile = qqfile;

    }

    public String getQqfileFileName() {

        return qqfileFileName;

    }

    public void setQqfileFileName(String qqfileFileName) {

        this.qqfileFileName = qqfileFileName;

    }

    @Action(value="fineUpload")

    public void fineUpload(){

        String path = ServletActionContext.getServletContext().getRealPath("/");

        System.out.println("path= " + path);

        FileOutputStream fos = null;

        FileInputStream fis = null;

        if(qqfile != null) {

            try {

                fos = new FileOutputStream(path + "\\" + qqfileFileName);

                fis = new FileInputStream(getQqfile());

                byte[] buffer = new byte[1024];

                int len = 0;

                while((len = fis.read(buffer)) > 0) {

                    fos.write(buffer, 0, len);

                }

            } catch (FileNotFoundException e) {

                e.printStackTrace();

            } catch (IOException e) {

                e.printStackTrace();

            } finally {

                try {

                    if(fis != null) {

                        fis.close();

                    }

                    if(fos != null) {

                        fos.close();

                    }

                } catch (IOException e) {

                    e.printStackTrace();

                }

            }

            try {

                PrintWriter writer = response.getWriter();

                writer.write("{\"success\": \"ok\"}");    //这里注意返回的内容必须是json的格式

                writer.flush();

                writer.close();

            } catch (IOException e) {

                e.printStackTrace();

            }

        }

    }

}

这里的两个注意点是：1）上传文件的名字默认是qqfile，且我没找到自行配置名字的选项。如果有知道的请告诉小弟哈。

　　　　　　　　　　2）ajax返回的内容必须是json的格式

3. 参考资料

1)乱世经典注意他的版本貌似有点旧了，但是讲的很详细

秒客网

Fine Uploader 简单配置方法

相关文章