SpringMVC + easyui + $. ajaxFileUpload precautions for file upload. springmvceasyui

Source: Internet
Author: User

SpringMVC + easyui + $. ajaxFileUpload precautions for file upload. springmvceasyui

When easyUI is used for front-end style display, the file upload problem is encountered, and the form is submitted in the pop-up layer. To avoid refreshing the page, the ajaxFileUpload plug-in is selected. When submitting a form, the system always finds that the background cannot receive the file, and then checks and finds that the original file id is incorrect.

The file upload box is defined as follows:

<Input class = "easyui-filebox" id = "image" name = "image" data-options = "label: 'product image: ', buttonText: 'browsed', prompt: 'Only images in jpg, gif, and png formats are supported. ', required: true ">

The submission method is as follows:

$. AjaxFileUpload ({type: 'post', url: '$ {pageContext. request. contextPath}/product/saveProduct ', secureuri: false, data: queryFormParam (' # formId '), // The json format of the data to be transferred: fileElementId: 'image', dataType: 'json', success: function (data) {// callback after the upload is successful. If (data. status) {$. messager. alert ("prompt", "saved successfully");} else {$. messager. alert ("prompt", "failed to save") ;}, error: function (data) {$. messager. alert ("prompt", "exception, please try again later! ");}});

After checking, it is found that when the easyui-filebox style is used, easyUI js will create an input of type = "file" for it, and the id is also defined by easyUI, the custom id is invalid. easyui. min. view the code in js as follows:

(function($){var _551=0;function _552(_553){var _554=$.data(_553,"filebox");var opts=_554.options;opts.fileboxId="filebox_file_id_"+(++_551);$(_553).addClass("filebox-f").textbox(opts);$(_553).textbox("textbox").attr("readonly","readonly");_554.filebox=$(_553).next().addClass("filebox");var file=_555(_553);var btn=$(_553).filebox("button");if(btn.length){$("<label class=\"filebox-label\" for=\""+opts.fileboxId+"\"></label>").appendTo(btn);if(btn.linkbutton("options").disabled){file.attr("disabled","disabled");}else{file.removeAttr("disabled");}}};function _555(_556){var _557=$.data(_556,"filebox");var opts=_557.options;_557.filebox.find(".textbox-value").remove();opts.oldValue="";var file=$("<input type=\"file\" class=\"textbox-value\">").appendTo(_557.filebox);file.attr("id",opts.fileboxId).attr("name",$(_556).attr("textboxName")||"");file.attr("accept",opts.accept);if(opts.multiple){file.attr("multiple","multiple");}file.change(function(){var _558=this.value;if(this.files){_558=$.map(this.files,function(file){return file.name;}).join(opts.separator);}$(_556).filebox("setText",_558);opts.onChange.call(_556,_558,opts.oldValue);opts.oldValue=_558;});return file;};

Multiple fileboxes can be defined in the form, and the filebox id is the filebox_file_id _ + serial number. If there is only one, it is filebox_file_id_1, because there is only one, then, change the fileElementId when the ajaxFileUpload is submitted to 'filebox _ file_id_1 ', and the background will receive the image value.

This is based on the source code. If you do not look at the source code, you can directly obtain the id using jQuery, as shown below:

var image_id= $("input[name='image']").attr("id");

Because the image name is unique in my form, you can obtain the id by name, and then enter the id in the fileElementId of ajaxFileUpload to achieve the same effect.

SpringMVC uses CommonsMultipartFile in the background to receive files, as shown below. After obtaining the path, use image. transferTo (saveDir); save it.

@RequestParam("image") CommonsMultipartFile image

SpringMVC + easyui + $. ajaxFileUpload: Notes for file upload. I hope it will be helpful to 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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.