ajaxFileUpload 文件上传下载

最新推荐文章于 2016-12-23 16:45:30 发布
最新推荐文章于 2016-12-23 16:45:30 发布
阅读量176 收藏
点赞数
文章标签： json java javascript ViewUI
原文链接：https://my.oschina.net/mola/blog/335267
版权

需要引用 的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;
    }
})
 <!--数据提交file submit-->
    function doSubmit(){
  	 var fileupload = document.getElementById("fileupload").value;
         if(""==fileupload){
             var msgArea = document.getElementById("msgArea");
             msgArea.innerHTML = '<font color="red" style="margin-left:10px">请选择上传文件！</font>';
             return false;
         }
         var extension=new String (fileupload.substring(fileupload.lastIndexOf(".")+1,fileupload.length));//文件扩展名
         if( extension =="doc"||extension=="docx"||extension=="pdf" || extension =="xls"  || extension =="xlsx")  {
        var archivesfileid=   document.getElementById("archivesfileid").value
         $.ajaxFileUpload
         (
             {
                 url:'${ctx}/addArchives/addFile/'+archivesfileid,//用于文件上传的服务器端请求地址
                 secureuri:false,//一般设置为false
                 fileElementId:'fileupload',//文件上传空间的id属性  <input type="file" id="file" name="file" />
                 dataType: 'json',//返回值类型 一般设置为json
                 success: function (data)  //服务器成功响应处理函数
                 {
                     appendList(data.fjid,data.fjmc,data.path,data.wjlx);
                    
                 },
                 error: function (data, status, e)//服务器响应失败处理函数
                 {
                     alert(data.msg);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
                 }
             }
         )
         }     else {
             alert("请选择word,excl或者pdf格式的文件！");
             return false;

         }
         
    }
前台展示代码

	<div style="width: 100%; height: 170px;">
						<div style="width: 100%;">
							<div style="width: 100%; height: 40px;">
								<span> <span class="col_left" style="font-size: 12;"></span>
									<input type="file" class="must" name="fileupload"
									id="fileupload" size="30" style="margin: 2px 0px 2px 0px"
									onkeydown="event.returnValue=false;" onpaste="return false" />
									<input type="hidden" name="YXBZ" value="0"> <input
									type="button" name="upLoadPic" value="上传" style="cursor: hand"
									class="btn btn-success" onclick="doSubmit()" />
								</span>
							</div>
							<div id="msgArea"></div>
							<div>
								<span> <span id="fhCreateFileList"> </span>
								</span>
							</div>
						</div>
					</div>


转载于:https://my.oschina.net/mola/blog/335267

chibisha9247
关注
后台学习六---ajaxFileupload文件上传下载
lxfHaHaHa的博客
04-24 2632
这一章讲讲文件的上传下载，这里我们使用ajax的上传文件方法。 ps：基于maven的springmvc框架都已经搭建好了的，如有问题，参考 ： 后台学习一—spring+maven+mybatis+mysql+junit整合1. 上传1.1 ajaxFileupload.js具体的功能js都已经封装好了，我们直接把js文件下过来使用，地址： http://download.youkuaiyun.com
AjaxFileUpload 文件上传
05-09
AjaxFileUpload 是一个专门用于实现异步文件上传的JavaScript组件，它利用了Ajax技术，让用户可以在不刷新页面的情况下完成文件上传，提供了更为流畅和友好的用户体验。 AjaxFileUpload 的核心原理在于利用Ajax...
AjaxFileUpload 文件下载
05-11
基于 jquery的ajaxfileupload插件实现了单个文件和多文件的上传
ajaxfileupload.js文件下载
08-16
此为前端进行文件上传，使用Ajax方式提交的js插件，使用方便简洁，开发很高效。
jquery ajax fileupload.js 下载
04-21
NULL 博文链接：https://dmwdmc.iteye.com/blog/1918988
使用ajaxFileUpload.js插件实现ajax无刷新上传文件
热门推荐
李熠专用博客_白帽子一枚，人称低危终结者
02-24 1万+
废话不多说直接看代码 首先需要下载ajaxFileUpload.js，百度去搜！ $.ajaxFileUpload( { url:'${ctx}/toImage.do', //需要链接到服务器地址 secureuri:false, fileElementId
Ajaxfileupload.js
06-24
javascript文件上传插件，Ajaxfileupload.js，官方下载版
$.ajaxFileUpload 文件上传
06-01
$.ajaxFileUpload 是一个jQuery插件，它提供了异步文件上传的能力，使得用户无需刷新页面即可完成文件提交，提高了用户体验。 $.ajaxFileUpload 的核心在于使用Ajax技术，它允许在后台与服务器交换数据并更新部分...
ajaxfileupload 异步下载文件
a_good_job的博客
12-23 730
@ResponseBody @RequestMapping(value="ajaxFileUpload",method = {RequestMethod.POST,RequestMethod.GET})     public  String ajaxFileUpload(Model model,HttpServletResponse response, @RequestParam Multip
ajaxFileUpload
08-15
ajaxFileUpload 前台文件上传dome JAVA
ajaxFileupload.js
04-24
ajaxFileupload.js
Ajax-AjaxFileUpload.zip
09-17
Ajax-AjaxFileUpload.zip,模拟异步文件上传的jquery插件。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
ajaxfileupload
04-22
JQ异步上传图片插件，可以运用这个插件实现异步上传
使用ajaxfileupload插件实现文件上传
AjaxFileUpload是基于jQuery的文件上传插件，它利用Ajax技术异步地上传文件，并允许实时获取上传进度。通过使用该插件，开发者可以更方便地处理文件上传过程中的各种细节，如上传前的文件校验、上传进度的反馈以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值