Angularjs Upload File component flowjs function, angularjsflowjs

Angularjs Upload File component flowjs function, angularjsflowjs

The upload and download function is almost no default function for current projects, regardless of consignment. Today we will talk about using the upload and download functions under AngularJS + bootsrtap.

1. angularjs and flowjs

Angularjs I also talked about some of its other functions in other blogs, but I did not explain it systematically. I am not going to introduce it here. This is explained on some official websites. I will also spend some time to sort out angularjs knowledge points and some problems that I need to pay attention to when using angularjs or my projects, I will share with you in other blogs. Here I only take a simple note, mainly using the flowjs component. By the way, angularjs is powerful.

1.1 flowjs

Bytes. I mainly list some common attributes of flowjs and the issues needing attention during use.

1.2flowjs attributes

<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> 

This is the simplest code to implement the upload function. It contains some attributes and Methods. Other parameters are not available for the moment. If you are interested, go to the above website.

<Span style = "font-size: 18px;" deep = "8"> {"flow-init": "initialize the uploaded property value", "target ": "Request interface path, corresponding to the backend server request", "singleFile": "whether to select single file upload, because flowjs supports multi-File Upload by default, of course, you also need to upload a single file, which can be set to true or false. "" true only supports single file upload, and false supports multi-File Upload. Remember that it must be of the boolean type. "" testChunks ":" flowjs is a multipart upload task. Therefore, it does not send only one request to the background. If the file is large, it will upload multiple parts, then, when all the files are uploaded, "" the system will synthesize a whole file. After this attribute is set to true, the system will check whether the request is enabled in the background, if it is enabled, the upload will continue after the next restart or the browser crashes. My understanding should be "," flow-files-added" : "It can be used to restrict the formats of uploaded files, such as excel, pem, jpeg, and png !! {Pem: 1, png: 1} "," flow-file-success ":" Callback Function after successful upload. You can process other operations after upload. For example, when using this component, it will be submitted together with other form items. "In this case, we need to submit the File Upload path, file name, and other form items to the background, this component does not support parameter passing, that is, using this component "," is divided into two steps. Step 1: Click Upload to upload the file to the specified path on the server. At the same time, the background returns the file path, file size, file name, and other file-related information "," Step 2: encapsulate the file information returned by the background together with other form items into an object, send to the background. The background receives a request to import the upload information to the database. "} </span>

1.3 instance

The preceding section describes flowjs and uses this component as an example. I will not elaborate on the introduction of js.

1.3.1 component configuration

Html code (I have not deleted some of our custom styles ):

<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">       

From this we can see that the component is based on the form, of course, you can also be based on other dom nodes, the main benefit of form-based processing is that the form submission, that is, the submit button, can directly help the $ flow for file upload. on the upload method, When you select a file, Click upload to execute the upload method. In the entire form, the $ flow exists globally, in this way, we can determine whether to allow users to upload files based on the file size or whether to select files. To relieve the pressure on the server, we generally do not allow users to submit some misoperations.
1.3.2 Method Processing
Upload method: $ flow. upload
Callback Function for successful 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);         }       } 
Here, the processing is to assign the attributes related to the files returned in the background to other variables. When we have other form items, we need to encapsulate some attributes and form items of the file into the same object and send it to the background for some warehouse receiving operations in the background.
Form submission:
//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 background processing
I won't say much about processing the day after tomorrow. Since I got started with the front-end, I haven't moved the background code for a long time, and I feel quite sad. However, springmvc is used the day after tomorrow. springmvc's upload class is called MultipartFile. Of course, you can also use HttpServletRequest, which can also be converted to the above class. I won't say much about this large online search. Now, the file upload function is implemented in this way.

Summary
The above is the Angularjs Upload File component flowjs function introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!