1. 程式人生 > >ajaxfileupload上傳帶額外引數

ajaxfileupload上傳帶額外引數

最經在工作中要實現檔案的無重新整理上傳,當然XmlHttpRequest物件是無法實現檔案的上傳功能的。google後找到JQuery的fileupload外掛,此外掛通過一個IFrame並在IFrame中建立一個form表單來實現檔案上傳;而在我的應用中還需要帶一些其他的文字引數,而此外掛並未提供此功能。 
        既然是動態建立form表單,那麼更定能加入其他引數的,請看程式碼(注意第41行): 

Java程式碼  收藏程式碼

jQuery.extend({  

    createUploadIframe: function(id, uri)  

    {  

            //create frame

  

            var frameId = 'jUploadFrame' + id;  

            if(window.ActiveXObject) {  

                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 = $('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');   

        var oldElement = $('#' + fileElementId);  

        var newElement = $(oldElement).clone();  

        $(oldElement).attr('id', fileId);  

        $(oldElement).before(newElement);  

        $(oldElement).appendTo(form);  

        //增加文字引數的支援  

        if (data) {  

            for (var i in data) {  

                $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);  

            }  

        }  

        //set attributes  

        $(form).css('position''absolute');  

        $(form).css('top''-1200px');  

        $(form).css('left''-1200px');  

        $(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, 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   

                                        {  

                                            $(io).remove();  

                                            $(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 io = $('#' + frameId);  

            var form = $('#' + formId);  

            $(form).attr('action', s.url);  

            $(form).attr('method''POST');  

            $(form).attr('target', frameId);  

            if(form.encoding)  

            {  

                form.encoding = 'multipart/form-data';                

            }  

            else  

            {                 

                form.enctype = 'multipart/form-data';  

            }             

            $(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;  

        // 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();  

            //alert($('param', data).each(function(){alert($(this).attr('value'));}));  

        return data;  

    }  

})  



使用方法: 

Java程式碼  收藏程式碼

$.ajaxFileUpload({  

        url: '/ajax/mine/uploadLogo',  

        secureuri:false,  

        fileElementId:'input_logo',  

        dataType: 'json',  

        data: {//加入的文字引數  

            "logoPath""param1",  

            "logoName""param2"  

        },  

        success: function(data) {  

        },  

        error: function() {  

            showError("上傳失敗,請檢查檔案是否符合格式要求。");  

        }  

    });  

相關推薦

ajaxfileupload額外引數

最經在工作中要實現檔案的無重新整理上傳,當然XmlHttpRequest物件是無法實現檔案的上傳功能的。google後找到JQuery的fileupload外掛,此外掛通過一個IFrame並在IFrame中建立一個form表單來實現檔案上傳;而在我的應用中還需要帶一些其他

ajaxFileUpload參數文件及JS驗證文件大小

resp 修改 except style js驗證 epic 創建 cti filepath 本代碼片段用於spring boot+hibernate,用maven構建一:ajaxFileUpload為了實現無刷新異步提交文件,構建 iframe 然後創建form表單 再將

ajaxfileupload檔案引數,json序列化到後臺!

ajaxfileupload方法傳檔案帶上json資料,到controller這麼都是接受到"{"這個符號. 方法一、自己寫的方法 html var f2= {                 "a" : "123",                 "b" : pol

vue+element upload引數

<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">儲存</el-button>   <el-upload

使用ajaxFileUpload外掛中文名稱的和下載問題

1.上傳時的問題: 當選擇好檔案上傳時,伺服器的左上角會一直轉個不停,原因是因為js中$.ajaxFileUpload的方法的url中寫成了.do,改為.json即可。 2.下載時的問題: 當頁面

ajaxFileUpload 檔案/圖片,引數,解決第二次無法問題

html: <script charset="utf-8" src="js/ajaxfileupload.js"></script> <input style="display:;" type="file" id="userfile" o

atitit.文件進度條的實現原理and組件選型and最佳實踐總結O7

private tps cto 協議 post sch 頁面 system osc atitit.文件上傳帶進度條的實現原理and組件選型and最佳實踐總結O7 1. 實現原理 1 2. 大的文件上傳原理::使用applet 1 3. 新的bp 2 1. 性能提升

ajaxfileuploadajaxfileupload 時會出現連接重置的問題

plugins err cor epo poi 前臺 element overflow 你在 1.ajaxfileupload 上傳時會出現如下問題: 2. 網上有很多的解決辦法,在這裏,我又發現了一種,可能你的錯誤會是這個原因引起的 ------原因是 : 你在一般

ajaxFileUpload文件成功後卻無法解析服務器返回的json數據

問題 div 文件 服務器 blog word-wrap ext 前臺 ces ajaxFileUpload是一款很好用的文件上傳插件,網上也有很多關於它的版本,但在上傳文件成功後想返回json數據給前臺時,卻會出現無法解析json數據的情況。   仔細調試

Asp.Net MVC 中JS通過ajaxfileupload圖片獲取身份證姓名、生日、家庭住址等詳細信息

新手上路 pri virt them boolean tac 識別 multipart utf 客戶要求用身份證圖片上傳獲取身份證的詳細信息就下來研究了一下(現在的客戶真的懶 身份證信息都懶得輸入了哈哈...),經過慢慢研究,果然皇天不負有心人搞出來了。這個借助的是騰訊

springMvc多附件進度條

html頁面 <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" co

ajaxFileUpload檔案簡單示例

寫在前面:   上傳檔案的方式有很多,最近在做專案的時候,一開始也試用了利用jquery的外掛ajaxFileUpload來上傳大檔案,下面,用一個上傳檔案的簡單例子,記錄下,學習的過程~~~   話不多說,直接上程式碼:   前臺jsp頁面:` <

MultipartHttpServletRequest,ajaxFileUpload檔案,讀取檔案亂碼問題

@RequestMapping(value = "/uploadOrgid", method = RequestMethod.POST, produces = "text/html;charset=UTF-8") @ResponseBody public String upl

Springmvc檔案例子,圖片的Excel,並利用poi解析。

直奔主題,第一步:上傳一個帶圖片的Excel。第二步:解析該Excel檔案,得到Excel資料和圖片。 1.pom.xml <!-- 檔案上傳 --> <dependency> <groupId>commons-

圖片攜帶引數至伺服器工具類

本篇採用的上傳方式是HttpUrlConnection方法,下篇將寫出xutils上傳的方法(包括多圖片上傳顯示進度條等)。敬請期待。 //UpLoadFileVideoUtils這個類就是工具類,只需要將這個類拷貝至專案中即可使用。下面是程式碼部分: 解釋下方法裡面的引數

解決使用ajaxFileUpload控制元件出現的問題:回撥函式總是進入error或success

上週說到做excel的匯入時,用到了jquery的一個上傳控制元件ajaxFileUpload,但今天測試的時候,卻出現了問題: 我們不妨先來檢視一下ajaxFileUpload的基本語法: $.ajaxFileUpload ({ url:xxx,

fileupload時傳遞引數

jQuery.fileupload是一個比較通用的控制元件,如果是簡單使用的話,也非常方便: 第一步引入相應的css跟js <link rel="stylesheet" href="/skins/skyblue/jquery.fileupl

windows下命令列終端使用rz,sz/下載檔案引數詳解

rz命令: (X) = option applies to XMODEM only (Y) = option applies to YMODEM only (Z) = option applies to ZMODEM only -+, --appe

多檔案ajaxfileupload

大體步驟: 1、選擇檔案(可多次選擇) 2、每次選擇檔案之後,將選中的檔案ajaxfileupload上傳到伺服器臨時資料夾,返回檔名稱,預覽展示 3、全域性變數儲存每次上傳的檔名,刪除上傳檔案時需刪除預覽、全域性變數中的檔名和臨時資料夾中的檔案 4、將需要上傳檔名(全域性

Springboot 檔案(進度條)

1. 相關依賴 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="htt