ajax实现文件上传与下载

java+ajax可以实现无刷新的文件上传与下载，虽然现在有很多的控件去实现这个功能，但是，我们还是要知道其中的原理

以便开发出适用于自己的控件

原理：用js创建一个隐藏的from表单，然后设置相应的信息，把需要传递的参数加入其中，最后提交表单即可。

1.文件上传的js：

/*-----------------------------------------------------------------------------
 *生成上传文件
 -----------------------------------------------------------------------------*/
(function($){
    $.fileUpload = function(options){
        
        options = options || {};
        
        if(!options.url || !options.data){
            throw new Error("Please enter all the required config options!");
        }
        
        $('#fileUpload').remove();
        
        var iframe = $('<iframe id="fileUpload" width=1 height=1 frameborder=0 style="display:none">').appendTo('body');//生成隐藏的内部iframe

        var formHTML = '<form action="" method="post">'+
            '<input type="hidden" name="json" />'+//需要传递过去的参数
            '</form>';//文件上传的表单
       
        setTimeout(function(){
            var body = (iframe.prop('contentDocument') !== undefined) ?
                            iframe.prop('contentDocument').body :
                            iframe.prop('document').body;   // IE
            
            body = $(body);
            body.html(formHTML);
            
            var form = body.find('form');
            
            form.attr('action',options.url);
            if(form.encoding)//设置提交二进制流
			{
				form.attr('encoding','multipart/form-data');     			
            }
            else
			{	
				form.attr('enctype','multipart/form-data');			
            }
            var oldElement = $('#' + options.fileElementId);
    		var newElement = oldElement.clone();
    		oldElement.attr('id',new Date().getTime());
    	    oldElement.before(newElement);
    	    oldElement.appendTo(form);//将文件选择框加入导表单中
            form.find('input[name=json]').val( JSON.stringify( options.data ));//将参数转换成json格式导入附在一个表单中
            form.submit();
        },50);
    };
    
})(jQuery);

$.fileUpload 
	(
		{
			url:'../../ImportExcelServlet',//提交的servle名
			fileElementId:'uploadIHNUrl',//文件选择框的id
			data:{ 
				actionManager : 'infHitchNManager'//传递过去的参数
			}
                  }
           );

/*-----------------------------------------------------------------------------
 *生成下载文件
 -----------------------------------------------------------------------------*/
(function($){
    $.downloadFile = function(options){
        
        options = options || {};
        
        if(!options.url || !options.data){
            throw new Error("Please enter all the required config options!");
        }
        
        $('#downloadFile').remove();
        
        var iframe = $('<iframe id="downloadFile" width=1 height=1 frameborder=0 style="display:none">').appendTo('body');

        var formHTML = '<form action="" method="post">'+
            '<input type="hidden" name="json" />'+
            '</form>';
        
        setTimeout(function(){
            var body = (iframe.prop('contentDocument') !== undefined) ?
                            iframe.prop('contentDocument').body :
                            iframe.prop('document').body;   // IE
            
            body = $(body);
            body.html(formHTML);
            
            var form = body.find('form');
            
            form.attr('action',options.url);
            form.find('input[name=json]').val( JSON.stringify( options.data ));
                        
            form.submit();
        },50);
    };
    
})(jQuery);

$.downloadFile({
	        url      : '../../FileDownload',data     : {
	            actionType : 'downloadFile',actionManager : 'infHitchNManager',param : { filename: filename }
	        }            
	    });

</pre>java中的下载的操作就是这样：<pre name="code" class="javascript">                            File file = new File(path);
		            // 取得文件名。
		            String filename = new String(file.getName().getBytes("utf-8"),"iso8859-1");
		            // 取得文件的后缀名。
		            String ext = filename.substring(filename.lastIndexOf(".") + 1).toUpperCase();

		            // 以流的形式下载文件。
		            InputStream fis = new BufferedInputStream(new FileInputStream(path));
		            OutputStream sos = new BufferedOutputStream(response.getOutputStream());
		            byte[] buffer = new byte[fis.available()];
		            fis.read(buffer);
		            fis.close();
		            // 清空response
		            response.reset();
		            response.setContentLength( (int) file.length() );
					response.setContentType("application/octet-stream");
		            // 设置response的Header
			    response.addHeader("Content-Type","text/html; charset=utf-8");
			    response.addHeader("Content-Disposition","attachment; filename=""+ filename + """);
		            sos.write(buffer);
		            sos.flush();
		            sos.close();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!