Fine Uploader 简单配置方法

最新推荐文章于 2024-10-18 12:21:37 发布

diangun4457

最新推荐文章于 2024-10-18 12:21:37 发布

阅读量267

点赞数

文章标签： javascript json java ViewUI

原文链接：http://www.cnblogs.com/lihuabest/p/3243410.html

版权

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

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

项目地址：Fine Uploader

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();
            }
        }
    }
}