java+ajax可以实现无刷新的文件上传与下载,虽然现在有很多的控件去实现这个功能,但是,我们还是要知道其中的原理
以便开发出适用于自己的控件
原理:用js创建一个隐藏的from表单,然后设置相应的信息,把需要传递的参数加入其中,最后提交表单即可。
/*----------------------------------------------------------------------------- *生成上传文件 -----------------------------------------------------------------------------*/ (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);这是一个通用的方法,在js中可以这样调用
$.fileUpload ( { url:'../../ImportExcelServlet',//提交的servle名 fileElementId:'uploadIHNUrl',//文件选择框的id data:{ actionManager : 'infHitchNManager'//传递过去的参数 } } );2.文件下载的js:
/*----------------------------------------------------------------------------- *生成下载文件 -----------------------------------------------------------------------------*/ (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();原文链接:https://www.f2er.com/ajax/164886.html