ajax无刷新上传文件（以上传图片为例）

最新推荐文章于 2021-03-10 04:11:32 发布
最新推荐文章于 2021-03-10 04:11:32 发布
阅读量568 收藏
点赞数
分类专栏： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nooneyanghuijava/article/details/8130795
版权

1.搭建一个最基本的struts2环境

2.导入Jquery库可以上传文件插件库（放到上传代码zip包中）

3.Struts2上传核心代码

package com.itecheasy.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class UploadFileAction extends ActionSupport {

	private static final long serialVersionUID = -7652341822159643008L;

	private File image;
	private String imageFileName;
	private String imageContentType;
	
	
	public File getImage() {
		return image;
	}


	public void setImage(File image) {
		this.image = image;
	}


	public String getImageFileName() {
		return imageFileName;
	}


	public void setImageFileName(String imageFileName) {
		this.imageFileName = imageFileName;
	}


	public String getImageContentType() {
		return imageContentType;
	}


	public void setImageContentType(String imageContentType) {
		this.imageContentType = imageContentType;
	}


	@SuppressWarnings("deprecation")
	public void uploadFile() throws IOException{
		
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();
		
		response.setHeader("pragma", "no-cache");
		response.setHeader("cache-control", "no-cache");
		response.setContentType("text/html");//（这里一定要设置为text/html）
		response.setCharacterEncoding("UTF-8");
		String path = request.getRealPath("/upload");
		InputStream inputStream = new FileInputStream(image);
		
		String imageName = UUID.randomUUID() + imageFileName.substring(imageFileName.lastIndexOf("."));
		OutputStream outputStream = new FileOutputStream(new File(path, imageName));
		
		byte[] buffer = new byte[1024];
		int len = 0;
		
		while(-1 != (len = inputStream.read(buffer, 0, buffer.length))){
			outputStream.write(buffer, 0, len);
		}
		if(null != outputStream){
			outputStream.close();
		}
		
		if(null != inputStream){
			inputStream.close();
		}
		
		PrintWriter out = response.getWriter();
		String fm = "{\"message\" : \"%s\"}";
		out.print(String.format(fm, "success"));
	}
}

4.页面前端的jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="js/ajaxfileupload.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#image").change(function(){
				$.ajaxFileUpload
		        (
		            {
		                url:'uploadFile.action',//用于文件上传的服务器端请求地址
		                secureuri:false,//一般设置为false
		                fileElementId:'image',//文件上传空间的id属性  <input type="file" id="image" name="image" />
		                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);
		                }
		            }
		        )
			});
		});
	</script>
  </head>
  
  <body>
    上传文件<input type="file" id="image" name="image" />
  </body>
</html>



因为无法上传zip文件所有我将ajaxfileupload.js的内容附加上，保存为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 () {}};	

    },

    handleError: function( s, xhr, status, e ) {
		// If a local callback was specified, fire it
		if ( s.error ) s.error( xhr, status, e );

		// Fire the global callback
		if ( s.global )
			jQuery.event.trigger( "ajaxError", [xhr, s, e] );
	},
    
    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;
    }
})



















                

        

        

    




    

      

        

            

              
                
                  nooneyanghuijava
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
Asp.net Ajax+JQuery 无刷新文件上传

				
			

			

				

					12-01
				

			

		

		

			
				
Asp.net Ajax+JQuery 无刷新文件上传，并且动态生成上传文件列表、动态生成删除按钮，并可执行删除。
是本人结合了别人的代码后改写的，感觉还是挺好用的，分享一下。

			
		

	



                

              
                



	

		

			

				
					
ajax实现无刷新上传文件功能

				
			

			

				

					12-03
				

			

		

		

			
				
本文实例为大家分享了ajax实现无刷新上传文件功能的具体代码，供大家参考，具体内容如下  详细代码如下  <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; ...

			
		

	



                


  
              

                


	

		

			

				
					
免费工具如何推广

				
			

			

				

					powerbysupplier的专栏
				

				

					06-05
					
					1032
					
				

			

		

		

			
				
救急!十万火急!各位斑竹,各位xdjm,请分析一下小弟对工具ILIVEHELP免费在线聊天产品的推广策略的优劣与得失.并对本人给予指导.谢谢.对产品的推广策略:一、对网站www.itecheasy.com.cn进行搜索引擎推广.二、查找目前网络上拥有同类型产品的营销策略与效果三、制作邮件模板,保留的方式采用邮件方式推广四、在各大博客与论坛上适当发贴五、申请域名ilivehelp并且制作网站,其中对

			
		

	





	

		

			

				
					
ajax无刷新上传

				
			

			

				

					qq247788490的专栏
				

				

					06-08
					
					348
					
				

			

		

		

			
				
http-equiv="Content-Type" content="text/html; charset=utf-8">


 
无标题文档


 



 
#div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;}


 
#div2 {width: 0; he

			
		

	



		

			
		



	

		

			

				
					
jsp中上传图片(使用ajaxfileupload)

					
热门推荐

				
			

			

				

					杨名天吓
				

				

					08-30
					
					2万+
					
				

			

		

		

			
				
jsp中无刷新上传图片(前台使用jquery+ajaxfileupload),后台用commons-fileupload处理


需求:前台选择图片，页面显示上传后的图片地址


代码一:ajaxUploadImg.jsp
请百度搜索，并下载jquery.js 及 ajaxfileupload.js

<%
	String path = request.getContextPath

			
		

	





	

		

			

				
					
php图片上传ajax,Ajax+php 无刷新上传图片功能

				
			

			

				

					weixin_31668255的博客
				

				

					03-10
					
					218
					
				

			

		

		

			
				
ε=(･д･｀*)ﾊｧ…  简单而粗暴的无刷新上传图片，前端效果如下面：Paste_Image.png亲测可以上传图片：Paste_Image.png(＾-＾)那就不多废话啦，直接上代码首先在站点目录下创建以下文件夹 为了方便复制代码 样式脚本都置于index.html里面了٩(๑`н´๑)۶：Paste_Image.pngindex.html：楸木的小猫不吃渔.Upload_picture{po...

			
		

	





	

		

			

				
					
PHP ajax upload无刷新上传图片文件

				
			

			

				

					05-18
				

			

		

		

			
				
PHP无刷新上传图片，Ajax图片无刷新新上传程序，可一次上传多张图片，批量上传图片，显示上传进度条，程序只允许GIF/JPG格式的图像上传，允许其它格式请修改代码，上传程序运行界面如图所示，界面简洁，功能实用，非...

			
		

	





	

		

			

				
					
php+ajax实现无刷新文件上传功能(ajaxuploadfile)

				
			

			

				

					10-18
				

			

		

		

			
				
在现代Web应用中，无刷新文件上传是一种提升用户体验的重要技术，它允许用户在不重新加载整个页面的情况下上传文件。PHP和AJAX结合可以很好地实现这一功能。本文将深入讲解如何利用PHP和AjaxFileUpload插件来创建一...

			
		

	





	

		

			

				
					
php ajax无刷新上传图片实例代码

				
			

			

				

					10-30
				

			

		

		

			
				
本示例主要展示了如何使用PHP和AJAX实现无刷新上传图片的功能。这个功能在现代网页应用中非常常见，它允许用户在不重新加载整个页面的情况下提交数据，提高用户体验。  首先，我们来看客户端的HTML和JavaScript部分...

			
		

	





	

		

			

				
					
php+ajax无刷新上传图片的实现方法

				
			

			

				

					10-20
				

			

		

		

			
				
在Web开发中，无刷新上传图片是一种常见的需求，它可以提供更好的用户体验，避免用户每次上传文件时都需要等待页面刷新。本篇文章将详细介绍如何使用PHP和AJAX技术实现这一功能。  首先，我们需要引入必要的文件。在...

			
		

	





	

		

			

				
					
基于Jq  ajax无刷新，图片上传

				
			

			

				

					01-29
				

			

		

		

			
				
基于Jq的ajax无刷新，图片上传，这里只写了，前端如何获取图片信息，然后利用ajax上传，后台的话，原来怎么操作文件就怎么操作，不需要做特殊处理

			
		

	





	

		

			

				
					
ASP.NET jquery ajax无刷新上传文件demo

				
			

			

				

					09-13
				

			

		

		

			
				
jquery+jquery.uploadify.js插件,实现无刷新上传文件
支持ie6,模拟进度条(模拟进度条,非正式进度)
无刷新上传 ashx处理.

			
		

	





	

		

			

				
					
ajax无刷新上传图片

				
			

			

				

					02-12
				

			

		

		

			
				
ajax无刷新上传图片，使用jqurey+ajaxfileupload

			
		

	





	

		

			

				
					
ajax 无刷新上传多张图片

				
			

			

				

					07-21
				

			

		

		

			
				
根据用户选择的多张图片类型的文件进行无刷新上传并预览结果，用户可以保存到数据库；

			
		

	





	

		

			

				
					
如何实现无刷新安全图片上传功能

				
			

			

				

					u011277123的博客
				

				

					01-18
					
					3342
					
				

			

		

		

			
				
大龄菜鸟 2017-01-17 23:28


有时候我们想通过表单的方式收集用户的数据，例如，想收集用户在使用系统的过程中遇到的故障，我们可能需要提供一个表单让用户填写故障模块并附上截图。这时候，我们可能面对的是匿名的用户，即用户无需任何权限就能够提交表单，这就不得不考虑安全性的问题。例如，要检查用户提交的内容中是否包含恶意代码，防范SQL注入、XSS攻击等行为，另外，还要对用户的访问行为

			
		

	





	

		

			

				
					
AJAX-----提交数据，不刷新页面。

				
			

			

				

					weixin_39944891的博客
				

				

					04-24
					
					915
					
				

			

		

		

			
				
使用jquery方法：
$.ajax({
	url:"/model_add_class/", //需要将内容提交到的地址（接口）
	type:"get", //提交方式
	data:{"className":className}, //数据内容
	dataType:'json', //提交格式
	success:function(data){
		console.log(data); // dat...

			
		

	





	

		

			

				
					
利用Jquery的AjaxUpload组件实现头像异步上传并回显

				
			

			

				

					op134972的博客
				

				

					01-12
					
					3858
					
				

			

		

		

			
				
练习中遇到头像上传不能实时显示的问题，利用ajaxUpload异步文件上传解决。
1、导入jquery-1.10.2.min.js、ajaxupload.3.6.js包。
2、jsp中导入包
    



2、jsp中的配置
js：
	//利用AjaxUpload组件实现异步上传头像并回显
    	$(document).ready(function(){
 	  		var

			
		

	





	

		

			

				
					
.net 批量上传简便无刷新文件图片上传系统

					
最新发布

				
			

			

				

					09-01
				

			

		

		

			
				
为了实现无刷新上传功能，我们可以借助AJAX技术。通过使用jQuery等JavaScript库，我们可以通过异步HTTP请求将文件上传到服务器，而不会引起页面的刷新。同时，我们还可以使用进度条组件来显示上传的进度，给用户更好...

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值