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

Editor to share with you how to achieve Maven project web multi-picture upload and format verification, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Let's show the effect first.

The customer enters the add page when adding, and needs the relevant page and code when uploading the file.

Note: the important code on the front-end page, the role of multiple is to support multiple image uploads, click events here must use the onchange event, do not misuse the onclick event!

Note: the purpose of the tag is to split the loop by the value in delims.

The following is the code and resolution of the onchange event corresponding to the front-end page

/ / the jQuery function corresponds to the above onchange event function uploadFile () {/ / since the JSP page has only one form, you only need to define the subscript 0 to specify the current form let formData = new FormData ($("form") [0]). / / key code: ajax asynchronously uploads pictures $.ajax ({url: "uploadFile", / / here corresponds to the value in the RequestMapping note in the controller control layer data: formData,// the form data to be uploaded type: "post", / / to upload in post mode here The reason is that get limits the size of uploaded files / / processData defaults to true. When set to true, jquery ajax will not serialize data when submitting, but directly use data processData: false. The contentType in / / ajax is set to false to prevent JQuery from operating on it, thus losing the delimiter, so that the server cannot parse the file normally. ContentType: false, success: function (msg) {/ / check whether the format of the uploaded file is a common picture type\ let str = "; let split = msg.split (", "); / / cut the array let flag = false; for (let I = 0; I) with a comma

< split.length; i++) { if (split[i].endsWith(".jpg") || split[i].endsWith(".png") || split[i].endsWith(".bmp") || split[i].endsWith(".jpeg") || split[i].endsWith(".gif")) { flag = true; } else { //一旦不满足上面的条件，就将旗帜flag设置为false，并打破循环 flag = false; break; } //循环遍历数组拼接字符串，src中需要添加虚拟路径 str += '

';} if (flag) {$("[name=img]") .val (msg) $("# sp1") .html (str)} else {alert ("upload picture format error!") $("[name=img]") .val ("") / / clear the previous code, background JSR303 automatic verification cannot be empty})}

Next, let's take a look at the picture upload code and parsing of the background controller layer.

/ / @ RequestMapping is an annotation that handles the request address mapping and can be used on classes or methods. / / @ RequestParam: bind the request parameter to the method parameter of the background controller (a note that receives ordinary parameters in springmvc) (to ensure that the value is consistent with the value in the name attribute of the frontend page) @ RequestMapping ("uploadFile") @ ResponseBody / / after adding @ ResponseBody, the json data will be returned directly. Public String uploadFile (@ RequestParam ("file") MultipartFile [] files) throws IOException {/ / the local address to store the picture String path = "D://img"; String [] fileNames = new String [files.length]; String imgs = ""; for (int I = 0; I < fileNames.length) UUID +) {/ / UUID is used to randomly generate non-duplicate file names / / getOriginalFilename () this method is used to obtain the name of the file uploaded from the foreground, and UUID does this processing to ensure that the uploaded file name is unique fileNames [I] = UUID.randomUUID (). ToString () + files.getOriginalFilename (); File file = new File (path, fileNames [I]) Files [I] .transferTo (file); / / upload the file pointed to by the file path to the corresponding directory. Imgs + = "," + fileNames [I];} / intercept the extra comma imgs = imgs.substring (1) from the imgs header; return imgs;} is all the content of the article "how to achieve multiple image uploads and format verification of Maven project web". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.