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!