zoukankan      html  css  js  c++  java
  • jquery之ajaxfileupload异步上传插件

    点我下载工程代码
    由于项目需求,在处理文件上传时需要使用到文件的异步上传。这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/download_project_version.php?version_id=6
    服务器端采用struts2来处理文件上传。
    所需环境:
    jquery.js
    ajaxfileupload.js
    struts2所依赖的jar包
    及struts2-json-plugin-2.1.8.1.jar
    编写文件上传的Action

    package com.ajaxfile.action;
    
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileOutputStream;
    
    import org.apache.struts2.ServletActionContext;
    
    import com.opensymphony.xwork2.ActionSupport;
    
    @SuppressWarnings("serial")
    public class FileAction extends ActionSupport {
    
        private File file;
        private String fileFileName;
        private String fileFileContentType;
    
        private String message = "你已成功上传文件";
        
        public String getMessage() {
            return message;
        }
    
        public void setMessage(String message) {
            this.message = message;
        }
    
        public File getFile() {
            return file;
        }
    
        public void setFile(File file) {
            this.file = file;
        }
    
        public String getFileFileName() {
            return fileFileName;
        }
    
        public void setFileFileName(String fileFileName) {
            this.fileFileName = fileFileName;
        }
    
        public String getFileFileContentType() {
            return fileFileContentType;
        }
    
        public void setFileFileContentType(String fileFileContentType) {
            this.fileFileContentType = fileFileContentType;
        }
    
        @SuppressWarnings("deprecation")
        @Override
        public String execute() throws Exception {
            
            String path = ServletActionContext.getRequest().getRealPath("/upload");
    
            try {
                File f = this.getFile();
                if(this.getFileFileName().endsWith(".exe")){
                    message="对不起,你上传的文件格式不允许!!!";
                    return ERROR;
                }
                FileInputStream inputStream = new FileInputStream(f);
                FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
                byte[] buf = new byte[1024];
                int length = 0;
                while ((length = inputStream.read(buf)) != -1) {
                    outputStream.write(buf, 0, length);
                }
                inputStream.close();
                outputStream.flush();
            } catch (Exception e) {
                e.printStackTrace();
                message = "对不起,文件上传失败了!!!!";
            }
            return SUCCESS;
        }
    
    }

    struts.xml

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
    <struts>
        <package name="struts2" extends="json-default">
            <action name="fileUploadAction" class="com.ajaxfile.action.FileAction">
                <result type="json" name="success">
                    <param name="contentType">
                        text/html
                    </param>
                </result>
                <result type="json" name="error">
                    <param name="contentType">
                        text/html
                    </param>
                </result>
            </action>
        </package>
    </struts>    

    注意结合Action观察struts.xml中result的配置。 

    contentType参数是一定要有的,否则浏览器总是提示将返回的JSON结果另存为文件,不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json,而ajaxfileupload则要求为text/html。 
    文件上传的jsp页面

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Insert title here</title>
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/ajaxfileupload.js"></script>
            <script type="text/javascript">
        function ajaxFileUpload()
        {
            
            $("#loading")
            .ajaxStart(function(){
                $(this).show();
            })//开始上传文件时显示一个图片
            .ajaxComplete(function(){
                $(this).hide();
            });//文件上传完成将图片隐藏起来
            
            $.ajaxFileUpload
            (
                {
                    url:'fileUploadAction.action',//用于文件上传的服务器端请求地址
                    secureuri:false,//一般设置为false
                    fileElementId:'file',//文件上传空间的id属性  <input type="file" id="file" name="file" />
                    dataType: 'json',//返回值类型 一般设置为json
                    success: function (data, status)  //服务器成功响应处理函数
                    {
                        alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
                        
                        if(typeof(data.error) != 'undefined')
                        {
                            if(data.error != '')
                            {
                                alert(data.error);
                            }else
                            {
                                alert(data.message);
                            }
                        }
                    },
                    error: function (data, status, e)//服务器响应失败处理函数
                    {
                        alert(e);
                    }
                }
            )
            
            return false;
    
        }
        </script>
        </head>
        <body>
            <img src="loading.gif" id="loading" style="display: none;">
            <input type="file" id="file" name="file" />
            <br />
            <input type="button" value="上传" onclick="return ajaxFileUpload();">
        </body>
    </html>

     注意观察<body>中的代码,并没有form表单。只是在按钮点击的时候触发ajaxFileUpload()方法。需要注意的是js文件引入的先后顺序,ajaxfileupload.js依赖于jquery因此你知道的。
    点我下载工程代码

    原文:http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html

  • 相关阅读:
    Java的静态块与实例块(转)
    Programming Ability Test学习 1031. Hello World for U (20)
    Programming Ability Test学习 1011. World Cup Betting (20)
    Programming Ability Test学习 1027. Colors in Mars (20)
    Programming Ability Test学习 1064. Complete Binary Search Tree (30)
    Programming Ability Test学习 1008. Elevator (20)
    【maven详解-生命周期】Maven的生命周期和插件
    【maven详解-插件】maven插件学习之源码插件Source Xref
    $(document).ready(){}、$(fucntion(){})、(function(){})(jQuery)onload()的区别
    你还没真的努力过,就轻易输给了懒惰
  • 原文地址:https://www.cnblogs.com/ae6623/p/4416388.html
Copyright © 2011-2022 走看看