ajax上传文件

服务器端采用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="上传" οnclick="return ajaxFileUpload();">
    </body>
</html>

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




ajaxfileupload.js源码

jQuery.extend({
   
 
    createUploadIframe: function(id, uri)
    {
           //create 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)
    {
       //create form
       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);
 
 
      
       //set attributes
       jQuery(form).css('position', 'absolute');
       jQuery(form).css('top', '-1200px');
       jQuery(form).css('left', '-1200px');
       jQuery(form).appendTo('body');    
       return form;
    },
 
    ajaxFileUpload: function(s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout     
        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;      
        // Watch for a new set of requests
        if ( s.global && ! jQuery.active++ )
       {
           jQuery.event.trigger( "ajaxStart" );
       }           
        var requestDone = false;
        // Create the request object
        var xml = {}  
        if ( s.global )
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        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)
           {
              jQuery.handleError(s, xml, null, e);
           }
            if ( xml || isTimeout == "timeout")
           {            
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    // Make sure that the request was successful or notmodified
                    if ( status != "error" )
                  {
                        // process the data (runs the xml through httpData regardless of callback)
                        var data = jQuery.uploadHttpData( xml, s.dataType );   
                        // If a local callback was specified, fire it and pass it the data
                        if ( s.success )
                            s.success( data, status );
   
                        // Fire the global callback
                        if( s.global )
                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                    } else
                        jQuery.handleError(s, xml, status);
                } catch(e)
              {
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                }
 
                // The request was completed
                if( s.global )
                    jQuery.event.trigger( "ajaxComplete", [xml, s] );
 
                // Handle the global AJAX counter
                if ( s.global && ! --jQuery.active )
                    jQuery.event.trigger( "ajaxStop" );
 
                // Process result
                if ( s.complete )
                    s.complete(xml, status);
 
                jQuery(io).unbind()
 
                setTimeout(function()
                                {   try
                                   {
                                       jQuery(io).remove();
                                       jQuery(form).remove();  
                                      
                                   } catch(e)
                                   {
                                       jQuery.handleError(s, xml, null, e);
                                   }                              
 
                                }, 100)
 
                xml = null
 
            }
        }
        // Timeout checker
        if ( s.timeout > 0 )
       {
            setTimeout(function(){
                // Check to see if the request is still happening
                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)
       {         
            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 the type is "script", eval it in global context
        if ( type == "script" )
            jQuery.globalEval( data );
        // Get the JavaScript object, if JSON is used.
        if ( type == "json" )
            eval( "data = " + data );
        // evaluate scripts within html
        if ( type == "html" )
            jQuery("<div>").html(data).evalScripts();
 
        return data;
    }
})
 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值