For projects nowadays, no matter whether they sell, there is almost no default function, which is the upload and download function. Today I will talk about the upload and download function under AngularJS+bootsrtap.
and flowjs
angularjs I have also talked about its other uses in other blogs, but I have not made any systematic explanations and I do not intend to introduce them one by one here. This is explained on some official websites. I will take some time to sort out the knowledge points of angularjs and the problems I need to pay attention to when using angularjs or some problems I encountered in the project. I will share them with you in other blogs. I've just briefly mentioned here, mainly the use of the flowjs component. By the way, we have to praise the power of angularjs.
1.1 flowjs
/flowjs/, This website is the API that I have seen the clearest description of the flowjs part. The above lists the use of flowjs as an upload component under angular and detailed explanations of properties. I mainly list some common properties of flowjs and issues that need to be paid attention to when using it
1.2flowjs attribute
<form class="panel panel-default"
flow-init="{target: 'url',singleFile:false,testChunks:false}"
flow-name=""
flow-files-added="!!{pem:1}[$()]"
flow-file-success="($message)">
</form>
This is the simplest code to implement the upload function, which contains some properties and methods. Some other parameters are not available here for the time being. If you are interested, please go to the above website to check it.
<span style="font-size:18px;" deep="8">{
"flow-init":"Initialize uploaded attribute value",
"target":"Request interface path, corresponding to the background server request",
"singleFile":"Whether to select single file upload, because flowjs supports multiple file uploads by default.
Of course, some requirements require single file upload, with the value true or false."
"true only supports single file upload, false supports multiple file uploads. Remember that it must be of boolean type."
"testChunks":"Flowjs upload is sharded, so it will not only send a request to the background once, if the file is larger,
It will upload it in multiple movies, and then wait for all the text to be uploaded,"
"He will synthesize a whole file, and after this property is set to true, it will check whether the request is enabled in the background.
If it is turned on, it will continue to upload after the next time, even if the browser is restarted or the browser crashes. My understanding should be to continue the transmission.",
"flow-files-added":"Can be used to limit the format of uploaded files，for exampleexcel，pem，jpeg，pngFormat requirements!!{pem:1,png:1}",
"flow-file-success":"Callback function after successful upload，You can handle other operations after uploading here。for example使用这个组件的时候会和其他表单项一起提交",
"At this time, we need to upload the file path，File name and other form items are submitted to the background，This component does not support parameter passing，That is to use this component",
"Divided into two steps，first step：Click to upload，First upload the file to the server specified path。Backend return file path，File size，File name and other information related to the file",
"Step 2：Encapsulate the file information returned by the background into an object together with other form items.，Send to the background。The background received a request，Upload information for database operation"
}</span>
1.3 Example
The above has explained flowjs, and here is an example to use this component. I won't go into details about the introduction of js.
1.3.1 Component configuration
html code (I haven't 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=""
flow-file-added="!!{pem:1}[$()]"
flow-file-success="($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">{{::'' | i18next }}</div>
<div class="form-group">
<label class="col-md-3 control-label">*{{::''|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 $" style="margin:10px 0px;">
{{$index+1}} {{}}
</p>
</div>
</div>
<span class="btn btn-primary col-md-1" style="margin-left: 20px;" flow-btn>{{::''|i18next}}</span>
</div>
</div>
</div>
<div class="panel-footer">
<div class="text-right">
<button type="button" class="btn btn-primary"
ng-click="($flow)" ng-disabled="$ < 1"
title="{{::'' | i18next}}">{{::'' | i18next}}
</button>
</div>
</div>
</form>
From here we can see that the component is based on form forms. Of course, you can also be based on other dom nodes. The main advantage of form-based is that the submit button of the form can directly help the $ method of file upload. When the user selects the file, click upload will execute the upload method. In the entire form form, the $flow exists globally. In this way, we can determine whether users are allowed to upload based on the size of the file or whether the file is selected. In order to alleviate the pressure on the server, we generally do not let users submit some misoperation operations.
1.3.2 Method processing
Upload method: $
The callback function that was successfully uploaded:
= function (responseResult) {
('importCAData');
= (responseResult).data;
//var data = ;
// = ;
var result = (responseResult).result;
var errorMessage = (responseResult).errorMessage;
if(result == "success"){
= true;
._success("Upload CA certificates successfully!", );
}else {
= false;
._error(errorMessage, );
}
}
The processing here is to assign the properties related to the file returned in the background to other variables. When we have other form items, we need to encapsulate some properties and form items of the file into the same object and send them to the background, so that the background can perform some inbound operations.
Form submission operation:
//save the form
= function () {
= ;
= ;
var data = {};
= ;
= ;
= ;
= ;
= ;
= ;
= ;
= ;
= ;
= ;
= ;
(data).then(function success(responseResult) {
if ( == 0) {
();
._success('Create radius server certificate successfully ', );
} else {
._error(, );
}
();
})
.catch(function fail(e) {
._error("");
})
.finally(function () {
();
});
};
1.4 Backend processing
I won’t say much about the day after tomorrow. Since I started working on the front end, I haven’t moved the code in the backend for a long time, and I feel very sad. But the day after tomorrow, springmvc is used. The upload class of springmvc 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 when I search for a large number of movies on the Internet. At this point, the file upload function is implemented
Summarize
The above is the flowjs function of the Angularjs upload file component introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!