ajaxfileupload.js与commons-fileupload文件上传

àì夳堔傛蜴生んèń 2023-07-15 08:45 13阅读 0赞

1 commons-fileupload maven依赖

<dependency>
       <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.2</version>
    </dependency>

2 ajaxfileupload.js  
这里就不给资源地址了,直接整个文件内容如下:

jQuery.extend({ 
    
        createUploadIframe: function(id, uri)
        { 
            //create frame
            var frameId = 'jUploadFrame' + id;
    
            if(window.ActiveXObject) { 
                if(jQuery.browser.version=="9.0") { 
                    io = document.createElement('iframe');
                    io.id = frameId;
                    io.name = frameId;
                } else if(jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0"||jQuery.browser.version=="8.0") { 
                    var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                    if(typeof uri== 'boolean'){ 
                        io.src = 'javascript:false';
                    }
                    else if(typeof uri== 'string'){ 
                        io.src = uri;
                    }
                }
            }
            else { 
                var io = document.createElement('iframe');
                io.id = frameId;
                io.name = frameId;
            }
            io.style.position = 'absolute';
            io.style.top = '-1000px';
            io.style.left = '-1000px';
    
            document.body.appendChild(io);
    
            return io;
        },
        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>');
            var oldElement = jQuery('#' + fileElementId);
            var newElement = jQuery(oldElement).clone();
            jQuery(oldElement).attr('id', fileId);
            jQuery(oldElement).before(newElement);
            jQuery(oldElement).appendTo(form);
            if (data) { 
                for (var i in data) { 
                    $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').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;
        },
        handleError: function( s, xhr, status, e ) 		{ 
    // If a local callback was specified, fire it
            if ( s.error ) { 
                s.error.call( s.context || s, xhr, status, e );
            }
    
            // Fire the global callback
            if ( s.global ) { 
                (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
            }
        },
        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 = s.fileElementId;
            var form = jQuery.createUploadForm(id, s.fileElementId,s.data);
            var io = jQuery.createUploadIframe(id, s.secureuri);
            var frameId = 'jUploadFrame' + id;
            var formId = 'jUploadForm' + id;
    
            if( s.global && ! jQuery.active++ )
            { 
                // Watch for a new set of requests
                jQuery.event.trigger( "ajaxStart" );
            }
            var requestDone = false;
            // Create the request object
            var xml = { };
            if( s.global )
            { 
                jQuery.event.trigger("ajaxSend", [xml, s]);
            }
    
            var uploadCallback = function(isTimeout)
            { 
                // Wait for a response to come back
                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( s.success )
                            { 
                                // ifa local callback was specified, fire it and pass it the data
                                s.success( data, status );
                            };
                            if( s.global )
                            { 
                                // Fire the global callback
                                jQuery.event.trigger( "ajaxSuccess", [xml, s] );
                            };
                        } else
                        { 
                            jQuery.handleError(s, xml, status);
                        }
    
                    } catch(e)
                    { 
                        status = "error";
                        jQuery.handleError(s, xml, status, e);
                    };
                    if( s.global )
                    { 
                        // The request was completed
                        jQuery.event.trigger( "ajaxComplete", [xml, s] );
                    };
    
    
                    // Handle the global AJAX counter
                    if(s.global && ! --jQuery.active)
                    { 
                        jQuery.event.trigger("ajaxStop");
                    };
                    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(){ 
    
                    if( !requestDone )
                    { 
                        // Check to see ifthe request is still happening
                        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)
                { 
                    form.encoding = 'multipart/form-data';
                }
                else
                { 
                    form.enctype = 'multipart/form-data';
                }
                jQuery(form).submit();
    
            } catch(e)
            { 
                jQuery.handleError(s, xml, null, e);
            }
            if(window.attachEvent){ 
                document.getElementById(frameId).attachEvent('onload', uploadCallback);
            }
            else{ 
                document.getElementById(frameId).addEventListener('load', uploadCallback, false);
            }
            return { abort: function () { }};
    
        },
    
        uploadHttpData: function( r, type ) { 
            var data = !type;
            data = type == "xml" || data ? r.responseXML : r.responseText;
            // ifthe type is "script", eval it in global context
            if( type == "script" )
            { 
                jQuery.globalEval( data );
            }
    
            // Get the JavaScript object, ifJSON is used.
            if( type == "json" )
            { 
                eval( "data = " + $(data).html() );
            }
    
            // evaluate scripts within html
            if( type == "html" )
            { 
                jQuery("<div>").html(data).evalScripts();
            }
    
            return data;
        }
    });

3 前端代码

4 js代码

ProcessInfoDlg.addSubmit = function() { 
    
        var ff = $("#processfile").val();
        if(!ff) { 
            window.alert("请选择上传文件");
            return;
        }
        //var processKey=$("#processKey").val();
        var processKey = "dfsasa";
        jQuery.ajaxFileUpload({ 
            url: "/process/addProcess",
            loading:true,
            type: "POST",
            secureuri: false,
            fileElementId: "processfile",
            dataType: "json",
            data: { processKey:processKey},
            error: function(data, status, e) { 
                window.alert("部署失败:" + data.message + "!");
            },
            success: function(data, status) { 
                console.log(data);
                if(data.success){ 
                    Feng.success("部署成功!");
                    window.parent.ProcesssInfo.table.refresh();
                    ProcessInfoDlg.close();
                }else{ 
                    window.alert("部署失败:" + data.message + "!");
                    ProcessInfoDlg.close();
                }
    
            }
        });
    }

参数说明:  
1、url　　　　　　　　　　 上传处理程序地址  
2、fileElementId　　　　　 文件选择框的id属性，即的id  
3、secureuri　　　　　　　 是否启用安全提交，默认为false  
4、dataType　　　　　　　 服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断  
5、success　　　　　　　　服务器响应成功后的处理函数 ，参数data就是服务器返回的数据  
6、error　　　　　　　　　 服务器响应失败后的处理函数  
7、data 　　　　　　　　　 自定义参数，当有数据要和上传的文件一起传到后台处理的时候会用到。这里注意，数据格式比较严格\{param:\[\{‘param1’:‘value1’,‘param2’:‘value2’ \},\{‘param1’:‘value3’,‘param2’:‘value4’ \}\]\}, 其中单引号不能改为双引号  
8、type 　　　　　　　　　 提交数据的方式，一般为post

5 后端代码

@RequestMapping("/addProcess")
        @ResponseBody
        public JsonResult addProcess(@RequestParam("processfile") MultipartFile processfile,@RequestParam("processKey")String processKey) { 
            try { 
                String oriName = processfile.getOriginalFilename();
                String newName = new Date().getTime()+"_"+oriName;
                File tempFile = new File("G:\\myproject\\musi\\musi-acititi\\src\\main\\resources\\bpmn\\test"+File.separator+newName);
                processfile.transferTo(tempFile);
            } catch (Exception e) { 
                return new JsonResult(false);
            }
            return new JsonResult(true);
        }