Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to upload files through Bootstrap". In daily operation, I believe many people have doubts about how to upload files through Bootstrap. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to upload files through Bootstrap". Next, please follow the editor to study!

Bootstrap File Input (the best file upload component) to display, upload, and how to save files on the server side.

Styles and scripts that introduce plug-ins

Add components to the page

Type=file and class=projectfile, indicating that they are of type input file. Name specifies its acquisition key in the background. Value specifies the image path when it is displayed.

Initialization

Projectfileoptions: {showUpload: false, showRemove: false, language: 'zh', allowedPreviewTypes: [' image'], allowedFileExtensions: ['jpg',' png', 'gif'], maxFileSize: 2000,} / / File upload box $('input [class = projectfile]') .each (function () {var imageurl = $(this) .attr ("value") If (imageurl) {var op = $.extend ({initialPreview: [/ / Preview the settings of the picture "

",]}, projectfileoptions); $(this) .fileinput (op);} else {$(this) .fileinput (projectfileoptions);}})

Get the corresponding input file through jquery, and then execute the fileinput method. ShowUpload sets whether there is an upload button. Language designated Sinicization

4. AllowedFileTypes and allowedFileExtensions don't know why it didn't work. MaxFileSize specifies the size of the uploaded file 5. Form forms with file files are submitted through ajax

Let's first look at the layout of the form form with file.

The project cover supports jpg, jpeg, png and gif formats, and the size is no more than 2.0m

Save

Enctype= "multipart/form-data" is essential. Submit nsubmit= "return iframeCallback (this, pageAjaxDone)" method, submit the form (iframeCallback) through ajax, and call the callback function (pageAjaxDone) after the upload is successful to proceed to the next step.

For an introduction to iframeCallback, please refer to the data submission of the form form where summernote is located. I won't introduce you any more here.

Then let's introduce the callback function pageAjaxDone.

Function pageAjaxDone (json) {YUNM.debug (json); YUNM.ajaxDone (json); if (json [YUNM.keys.statusCode] = = YUNM.statusCode.ok) {var msg = json [YUNM.keys.message]; / / pop-up message prompts YUNM.debug (msg) If (YUNM.callbackType.confirmTimeoutForward = = json.callbackType) {$.showSuccessTimeout (msg, function () {_ window.location = json.forwardUrl;});}

Its main function is to handle the error messages passed by the server through the ajaxDone method. If the server operation is successful, it will display a prompt message and jump to the corresponding url.

Save pictures on the server side

Please refer to the backend springMVC file to save

Ps: the above blog left a little question and didn't study it until a great friend ihchenchen gave me the following reminder:

AllowedFileTypes, allowedFileExtensions I know why it doesn't work, because the fileinput () method is called twice, once in the last few lines of fileinput.js, and once in your own $(this). Fileinput (). The values of allowedFileTypes and allowedFileExtensions are not set in fileinput.js.

There are two ways to change:

1. Comment out the last few lines of the call in fileinput.js.

2, all use the "data-" method to do, do not write $(this). Fileinput ().

I am very grateful for ihchenchen's kind reminder. Although his explanation did not solve my questions, I like this interactive technical exchange. I have written many blogs before, and rarely have such well-intentioned and effective answers. This reminds me of Chinese programmers and foreign programmers, the story inside is shocking, with a little bit of shame. So how to do "Ask questions, get answers, no distractions." It is particularly precious, and "ihchenchen" is full of this spirit!

Dispel allowedFileTypes and allowedFileExtensions

Before, I wondered why bootstrap fileinput set these two properties, but it had no effect, but it was actually my own misunderstanding, but now I suddenly realized it after a painful understanding!

① 、 allowedFileTypes

AllowedFileTypes

Array the list of allowed file types for upload. This by default is set to null which means the plugin supports all file types for upload. If an invalid file type is found, then a validation error message as set in msgInvalidFileType will be raised. The following types as set in fileTypeSettings are available for setup.

['image',' html', 'text',' video', 'audio',' flash', 'object']

Let's start with "allowedFileTypes", which tells us the type of file to choose.

In other words, we hope that the "all files" at this time is not "all files", but "image" and so on. Obviously this logic is not wrong, but it is not suitable for bootstrap fileinput!

So, at this time, it's easy for me to think that "allowedFileTypes" doesn't work!

Working principle of ② and allowedFileTypes

(this) .fileinput ({showUpload: false, showRemove: false, language: 'zh', allowedPreviewTypes: [' image'], allowedFileTypes: ['image'] AllowedFileExtensions: ['jpg',' png'], maxFileSize: 2000,})

We load a bootstrap fileinput component through the fileinput method, so how does it implement allowedFileTypes internally?

By searching for the "allowedFileTypes" keyword in the fileinput.js file, we get the following code:

Var node = ctr + I, previewId = previewInitId + "-" + node, isText, file = files [I], caption = self.slug (file.name), fileSize = (file.size | | 0) / 1000, checkFile, fileExtExpr ='', previewData = objUrl.createObjectURL (file), fileCount = 0, j, msg, typ, chk, fileTypes = self.allowedFileTypes StrTypes = isEmpty (fileTypes)?'': fileTypes.join (','), fileExt = self.allowedFileExtensions, strExt = isEmpty (fileExt)?': fileExt.join (',')

Then we continue to see the following code:

If (! isEmpty (fileTypes) & & isArray (fileTypes)) {for (j = 0; j < fileTypes.length; j + = 1) {typ = fileTypes [j]; checkFile = settings [typ]; chk = (checkFile! = = undefined & & checkFile (file.type, caption)) FileCount + = isEmpty (chk)? 0: chk.length;} if (fileCount = 0) {msg = self.msgInvalidFileType.replace ('{name}', caption). Replace ('{types}', strTypes); self.isError = throwError (msg, file, previewId, I) Return;}}

We can see that the file type checking occurs on the checkFile method, so what exactly does the checkFile method do?

DefaultFileTypeSettings = {image: function (vType, vName) {return (vType! = = undefined)? VType.match ('image.*'): vName.match (/. (png | jpe?g) $/ I);},...

That's what checkFile is all about.

That is, when we specify allowedFileTypes: ['image'], image type checking occurs. Obviously, the txt file we selected does not belong to the image type, so it will not match, and the above interface appears. At the same time, this method tells us that when we do not specify allowedFileTypes: ['image'], but only specify allowedFileExtensions: [' jpg', 'png'], vName.match (/. (png | jpe?g) $/ I), that is, the file suffix type check will be performed, which is very critical, laying the foundation for our next introduction to "allowedFileExtensions". When will ③ and allowedFileExtensions work?

After discussing "allowedFileTypes" in the last section, we said "allowedFileExtensions" incidentally, so how do we make the suffix check?

$(this) .fileinput ({showUpload: false, showRemove: false, language: 'zh', allowedPreviewTypes: [' image'], allowedFileExtensions: ['jpg',' png'] MaxFileSize: 2000,})

The property specified by the fileinput component at this time is as above, without "allowedFileTypes", and the allowed suffix type is "['jpg',' png']", that is, an error will appear if we choose the picture of gif.

If the error expectation has occurred, please pay special attention to:

Image: function (vType, vName) {return (vType! = = undefined)? VType.match ('image.*'): vName.match (/. (png | jpe?g) $/ I);}

The original code in the fileinput.js file is as follows:

Image: function (vType, vName) {return (vType! = = undefined)? VType.match ('image.*'): vName.match (/. (gif | png | jpe?g) $/ I);}, at this point, the study on "how to upload a file through Bootstrap" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.