ajax上传文件

最新推荐文章于 2020-06-10 18:14:36 发布
最新推荐文章于 2020-06-10 18:14:36 发布
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript+html+css 文章标签： ajax jquery function struts xml callback

服务器端采用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;
    }
})


lzs109
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax 文件上传
浓汤
05-22 687
要给文件上传&lt;form&gt;标签添加enctype="multipart/form-data"属性，php页面才能接到数据。$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别首先，前者，只能序列化表单中的数据 ，比如文本框等input  select等的数据，但是对于文件，比如文...
ajaxFileUpload+struts2实现多文件上传(源码)
07-02
ajaxFileUpload+struts2实现多文件上传(源码) 博文地址：http://blog.csdn.net/itmyhome1990/article/details/36396291
ajax上传图片(struts1.2)
zw7534313的专栏
06-29 250
一.sample.html(提交页面) &lt;form name="upfile_form" action="singertonUploadAction" method="POST" enctype="multipart/form-data"&gt;      &lt;input type="file" name="upload_file" id="u
利用struts实现jsp中的图片上传和预览
jurlon的专栏
07-22 1079
jsp中struts的图片上传和预览jsp代码
Ajax实现文件上传
dianmei3204的博客
10-18 81
利用html5中的file对象利用FormData对象进行上传 前端页面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax文件上传</title> </head&g...
上传文件AJAX
05-15
在现代Web开发中，"上传文件AJAX"是一项至关重要的技术，它允许用户在不刷新整个页面的情况下，通过异步方式上传文件。这种方式极大地提升了用户体验，因为它使得网页交互更加流畅和快速。AJAX（Asynchronous ...
前端调用Ajax上传文件
07-14
"前端调用Ajax上传文件"是利用Ajax技术实现异步文件上传的一种方法，它避免了传统表单提交导致页面刷新的问题，提供了更好的用户体验。下面将详细介绍这个过程涉及的关键知识点。 **1. HTML5 FormData** Ajax上传...
PHP ajax上传文件
08-24
在PHP中，`$_FILES`全局数组用于获取上传文件的信息，如文件名、大小、类型、临时文件名以及错误状态。 以下是一个简单的PHP文件上传脚本示例： ```php if(isset($_FILES['file']) && $_FILES['file']['error'] =...
JavaScript使用Ajax上传文件的示例代码
10-19
在JavaScript中，Ajax上传文件是一种常见且高效的方法，它允许用户在不刷新整个页面的情况下将文件发送到服务器。Ajax（Asynchronous JavaScript and XML）技术利用XMLHttpRequest对象与服务器进行异步通信，使得...
jQuery Ajax 上传文件处理方式介绍(推荐)
10-22
这是因为通常的jQuery AJAX请求会自动处理数据和设置Content-Type，但上传文件时我们需要手动处理： ```javascript $.ajax({ url: Url, // 上传的URL type: 'POST', data: formData, processData: false, // ...
Ajax上传文件进度条Codular
10-19
首先，我们要理解Ajax上传文件的基本原理。传统的文件上传通常涉及表单提交，页面会跳转或重载。而Ajax上传则通过JavaScript异步地发送HTTP请求，将文件数据传输到服务器，同时保持用户界面的活跃状态。在现代浏览器...
.net(web form) ajax上传文件demo
07-07
在.NET Web Form中实现AJAX文件上传是一种提升用户体验的有效方式，因为它允许用户在不刷新整个页面的情况下上传文件。本示例使用了`ajaxfileupload.js`脚本库和`.ashx`处理程序来完成这一任务。`ajaxfileupload.js`...
ajax上传文件（ajax+Struts1 & ajax+servlet+上传进度条）
zhouxzcsdn的博客
06-10 395
Struts1 ajax上传文件 ajax请求 function uploadFile(){ var formData = new FormData(); formData.append("formFile",$('#fileId')[0].files[0]); $.ajax({ cache: true, type: "POST", url:"<%=request.getContextPath()%>/impDataAction.do?type=uploadFile",
struts1+ajax+jquery上传文件
zhangnana200的博客
07-14 2559
项目里上传文件，都是常规form表单提交，本次有个需求需要上传，想着还是用ajax上传，用户使用起来比较好看，等待时间较短，网上查了资料，发现能够现成使用的较少，分析一下： 展现jsp： 引入文件： /js/jquery-1.7.1.min.js /js/ajaxfileupload.js $(document).ready(function(){ $("#bi
jsp ajax 上传文件
最新发布
11-19
JSP是一种用于创建动态网页的Java技术，而Ajax是一种通过在不重新加载整个网页的情况下更新部分页面的...通过结合JSP和Ajax的技术，可以实现在页面中通过Ajax上传文件的功能，提供更加便捷和用户友好的文件上传体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值