<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        Angularjs上傳文件組件flowjs功能

        來源:懂視網 責編:小采 時間:2020-11-27 22:33:11
        文檔

        Angularjs上傳文件組件flowjs功能

        Angularjs上傳文件組件flowjs功能:現在的項目,無論代銷,幾乎不會缺省的一個功能就是上傳下載功能,今天談一談使用AngularJS+bootsrtap下的上傳下載功能。 1.angularjs和flowjs angularjs我在其他的博客里面也講到了它的其他的一些用處,只是沒有做過系統的說明,在這里也不打算一一介紹。這
        推薦度:
        導讀Angularjs上傳文件組件flowjs功能:現在的項目,無論代銷,幾乎不會缺省的一個功能就是上傳下載功能,今天談一談使用AngularJS+bootsrtap下的上傳下載功能。 1.angularjs和flowjs angularjs我在其他的博客里面也講到了它的其他的一些用處,只是沒有做過系統的說明,在這里也不打算一一介紹。這

        現在的項目,無論代銷,幾乎不會缺省的一個功能就是上傳下載功能,今天談一談使用AngularJS+bootsrtap下的上傳下載功能。

        1.angularjs和flowjs

        angularjs我在其他的博客里面也講到了它的其他的一些用處,只是沒有做過系統的說明,在這里也不打算一一介紹。這個在一些官網上都有說明,我也會花一點時間去整理一下angularjs的知識點以及在使用到angularjs需要注意的或者我在項目中碰到的一些問題,會在其他博客中跟大家分享。這里我只簡單的一筆帶過,主要是flowjs這個組件的使用。順便一提,還得夸夸angularjs的強大。

        1.1 flowjs

        https://github.com/flowjs/flow.js,這個網站上是我見到過對flowjs這部分描述最清楚的API了,上面列舉了flowjs作為angular下的上傳組件的使用以及屬性的詳細講解。我主要列舉flowjs常用的一些屬性以及使用時需要注意的問題

        1.2flowjs屬性

        <form class="panel panel-default" 
         flow-init="{target: 'url',singleFile:false,testChunks:false}" 
         flow-name="vm.flow" 
         flow-files-added="!!{pem:1}[$file.getExtension()]" 
         flow-file-success="vm.action.importCAData($message)"> 
        </form> 

        這是一個最簡單的實現上傳功能的代碼,里面包含了一些屬性和方法,其他的一些參數這里暫時用不到,感興趣的請到上面的網站去查閱。

        <span style="font-size:18px;" deep="8">{ 
         "flow-init":"初始化上傳的屬性值", 
         "target":"請求接口路徑,對應到后臺server端請求", 
         "singleFile":"是否選擇單文件上傳,因為flowjs默認是支持多文件上傳的, 
         當然也有的需求會需要單文件上傳,取值為true或false." 
         "true是只支持單文件上傳,false支持多文件上傳,記得一定是boolean類型的." 
         "testChunks":"flowjs上傳是分片的,所以他不會只往后臺發送一次請求,如果文件比較大, 
         它會分多片上傳,然后等所有的都上傳文成," 
         "他會去合成一個整體的文件,而這個屬性設置為true之后就會去檢測一下該請求在后臺是否開啟, 
         如果開了就會在下次即使重啟或者瀏覽器奔潰后繼續上傳,我的理解應該是續傳吧", 
         "flow-files-added":"可以用來限制上傳文件的格式,比如excel,pem,jpeg,png等格式要求!!{pem:1,png:1}", 
         "flow-file-success":"上傳成功之后的回調函數,你可以在這里面處理上傳之后的其他操作。比如使用這個組件的時候會和其他表單項一起提交", 
         "這時我們需要將文件的上傳路徑,文件名字和其他表單項一起提交到后臺,而該組件不支持參數傳遞,也就是使用這個組件", 
         "分為兩步,第一步:點擊上傳,先將文件上傳到服務器指定路徑。同時后臺返回文件路徑,文件大小,文件名稱等與文件相關的信息", 
         "第二步:將后臺返回的文件信息和其他表單項一起封裝到一個對象中,發送給后臺。后臺接到請求,將上傳信息進行入庫操作" 
        }</span> 

        1.3實例

        上面已經對flowjs進行了一個說明,在這里舉個例子來使用一下該組件。關于引入js,我就不詳細說了。

        1.3.1組件配置

        html代碼(里面有些我們自定義的樣式我就沒有刪除):

        <form class="panel panel-default" 
         flow-init="{target: 'api/ham/tool/certificate/importCa',singleFile:true,testChunks:false}" 
         flow-name="vm.flow" 
         flow-file-added="!!{pem:1}[$file.getExtension()]" 
         flow-file-success="vm.action.importCAData($message)"> 
         <div class="panel-heading"> 
         <h4 class="app-heading"> 
         upload file 
         </h4> 
         </div> 
         <div class="panel-body"> 
         <div class="form-horizontal"> 
         <div class="asterisk-info">{{::'button-label.asterisk' | i18next }}</div> 
         <div class="form-group"> 
         <label class="col-md-3 control-label">*{{::'am.secondaryMenu.tools.certificate.item.uploadCAFile'|i18next}}</label> 
         <div class="col-md-6 " style="background-color:#eee;"> 
         <div class="file-name-list" style="min-height: 10em;"> 
         <p ng-repeat="file in $flow.files" style="margin:10px 0px;"> 
         {{$index+1}} {{file.name}} 
         </p> 
         </div> 
         </div> 
         <span class="btn btn-primary col-md-1" style="margin-left: 20px;" flow-btn>{{::'am.secondaryMenu.tools.certificate.item.upload'|i18next}}</span> 
         </div> 
         </div> 
         </div> 
         <div class="panel-footer"> 
         <div class="text-right"> 
         <button id="sampleOne-edit" type="button" class="btn btn-primary" 
         ng-click="vm.action.commitCAFile($flow)" ng-disabled="$flow.files.length < 1" 
         title="{{::'button-label.import' | i18next}}">{{::'button-label.import' | i18next}} 
         </button> 
         </div> 
         </div> 
        </form> 

        從這里我們可以看出,組件是基于form表單的,當然你也可以基于其他dom節點上,基于表單的好處主要是在于表單的提交即submit按鈕可以直接幫到到文件上傳的$flow.upload方法上,當用戶選擇文件后,點擊上傳就會執行上傳方法,在整個form表單中該$flow是全局存在的,這樣我們就可以根據文件的大小或者是否選擇文件來確定是否允許用戶上傳,為了緩解服務器壓力,我們一般是不會讓用戶提交一些誤操作的。

        1.3.2方法處理

        上傳方法:$flow.upload

        上傳成功的回調函數:

        vm.action.importCAData = function (responseResult) { 
         console.info('importCAData'); 
         vm.action.CAName = angular.fromJson(responseResult).data; 
         //var data = responseResult.data; 
         //data.keyPasswd = vm.cache.currentItem.keyPasswd; 
         var result = angular.fromJson(responseResult).result; 
         var errorMessage = angular.fromJson(responseResult).errorMessage; 
         if(result == "success"){ 
         vm.cache.caFlag = true; 
         vm.cache.alert._success("Upload CA certificates successfully!", vm.alertConfig); 
         }else { 
         vm.caDisabled = false; 
         vm.cache.alert._error(errorMessage, vm.alertConfig); 
         } 
         } 

        在這里的處理是將后臺返回的文件相關的屬性賦值給其他變量。當我們存在其他表單項的時候,需要將該文件的一些屬性和表單項封裝到同一個對象中發送給后臺,讓后臺進行一些入庫操作。
        表單提交操作:

        //save the form 
         vm.action.createItem = function () { 
         vm.action.data.keyPasswd = vm.cache.currentItem.keyPasswd; 
         vm.action.data.CAName = vm.action.CAName; 
         var data = {}; 
         data.caFileName = vm.action.CAName; 
         data.fileName = vm.action.data.fileName; 
         data.from = vm.action.data.from; 
         data.isExpiryStatus = vm.action.data.isExpiryStatus; 
         data.name = vm.action.data.name; 
         data.to = vm.action.data.to; 
         data.type = vm.action.data.type; 
         data.keyPasswd = vm.cache.currentItem.keyPasswd; 
         data.usingStatus = vm.action.data.usingStatus; 
         data.validityStartTime = vm.action.data.validityStartTime; 
         data.validityStopTime = vm.action.data.validityStopTime; 
         amCertificateService.createItem(data).then(function success(responseResult) { 
         if (responseResult.errorCode == 0) { 
         vm.action.reset(); 
         vm.cache.alert._success('Create radius server certificate successfully ', vm.alertConfig); 
         } else { 
         vm.cache.alert._error(responseResult.translated.errorMessageTranslated, vm.alertConfig); 
         } 
         amCertificateService.getList(); 
         }) 
         .catch(function fail(e) { 
         vm.cache.alert._error(""); 
         }) 
         .finally(function () { 
         vm.action.reset(); 
         }); 
         }; 

        1.4后臺處理

        后天處理我就不多說了,自從搞上了前端,后臺的代碼我都挺長時間沒動過了,感覺挺悲哀的。但是后天使用的是springmvc,springmvc的上傳類叫MultipartFile,當然你也可以使用HttpServletRequest ,這個里面也可以轉為上面的那個類。這個網上一搜一大片,我就不多說了。至此,文件上傳功能就這樣實現了

        總結

        以上所述是小編給大家介紹的Angularjs上傳文件組件flowjs功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        Angularjs上傳文件組件flowjs功能

        Angularjs上傳文件組件flowjs功能:現在的項目,無論代銷,幾乎不會缺省的一個功能就是上傳下載功能,今天談一談使用AngularJS+bootsrtap下的上傳下載功能。 1.angularjs和flowjs angularjs我在其他的博客里面也講到了它的其他的一些用處,只是沒有做過系統的說明,在這里也不打算一一介紹。這
        推薦度:
        標簽: 上傳 上傳文件 js
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 四虎影视在线永久免费观看| 亚洲毛片免费视频| 亚洲av无码天堂一区二区三区| 亚洲国产精品久久丫| 日本在线高清免费爱做网站| 中文字幕亚洲综合久久| 18禁美女裸体免费网站| 亚洲一级视频在线观看| 成人性生交大片免费看无遮挡 | 乱淫片免费影院观看| 免费女人18毛片a级毛片视频| 亚洲av纯肉无码精品动漫| 免费大黄网站在线观| 国产免费伦精品一区二区三区| 国产亚洲视频在线播放| a级毛片毛片免费观看久潮喷| 亚洲91av视频| 国产一卡二卡3卡四卡免费| 国产成人精品日本亚洲语音 | 亚洲美女在线国产| 国产真人无码作爱免费视频| 亚洲不卡中文字幕无码| 亚洲成人在线免费观看| 韩国亚洲伊人久久综合影院| 2048亚洲精品国产| 99久热只有精品视频免费看 | 国产成人高清精品免费软件| 中美日韩在线网免费毛片视频| 国产亚洲综合成人91精品| 97视频免费在线| 窝窝影视午夜看片免费| 国产AV无码专区亚洲Av| 国产一卡2卡3卡4卡无卡免费视频| 国产成人亚洲综合在线| 久久亚洲国产午夜精品理论片| 三年片在线观看免费大全 | 精品亚洲aⅴ在线观看| 爽爽日本在线视频免费| 爱丫爱丫影院在线观看免费| 亚洲成人激情小说| 亚洲日韩乱码中文无码蜜桃臀网站|