AjaxFileupload, ajaxfileupload

AjaxFileupload, ajaxfileupload

AjaxFileuplaod is a plug-in for asynchronous Image Upload.

 

1. Introduce the plug-in:

<Script src = "$ {ctxStatic}/js/ajaxfileupload. js" type = "text/javascript"> </script>

<Script src = "$ {ctxStatic}/js/jquery. min. js" type = "text/javascript"> </script>
<Script src = "$ {ctxStatic}/js/bootstrap. min. js" type = "text/javascript"> </script>

2. jsp page

<Form action = "" class = "form-group" id = "data-form" encType = "multipart/form-data"/>

<Label class = "col-sm-2 control-label"> image address: </label>
<Div class = "col-md-4">
<Input class = "form-control" id = "adPicLink" name = "adPicLink"
Required type = "text" style = "width: 200px;"/>
</Div>
<Label class = "col-sm-2 control-label"> activity address: </label>
<Div class = "col-md-4">
<Input class = "form-control" id = "adLink" name = "adLink"
Required type = "text" style = "width: 200px;"/>
</Div>

<Label class = "col-sm-2 control-label"> activity status: </label>
<Div class = "col-md-4">
<Input class = "form-control" id = "adStatus" name = "adStatus" required
Type = "text" style = "width: 200px;"/>
</Div>
<Label class = "col-sm-2 control-label" id = "uploadLabel"> Image Upload: </label>
<Div class = "col-md-4">
<Input id = "upload" name = "upload" type = "file" multiple = ""/>
</Div>

</Form>

* EncType = "multipart/form-data": when data and images are uploaded together, you must add

3. js method

Url = "$ {ctx}/$ {moduleName}/update. json? ";

Var params = "adName =" + $ ("# adName "). val () + "& adPicLink =" + $ ("# adPicLink "). val () // I tried to use data: {"name": "name"} to pass the parameter. The backend obtains null. I think this is the only way to pass parameters, maybe there is better
Url = url + params;
$. AjaxFileUpload
(
{
Url: url, // the address of the upload Handler
Type: 'post', // Request Method
FileElementId: 'upload', // Id of the uploaded Image Tag

Data: data (I think it is useless. We recommend that you do not add it)
DataType: 'json', // type of data returned by the server. It can be xml, script, json, or html. If this parameter is left blank, jQuery will automatically judge it.
Success: function (result) // the server responds to the successful processing function.
Error: function (data) // server response failure processing function
}
)

4. configuration in the configuration file

<! -- When uploading files, SpringMVC needs to configure the MultipartResolver Processor -->
<Bean id = "multipartResolver" class = "org. springframework. web. multipart. commons. CommonsMultipartResolver">
<! -- Specify that the total size of the uploaded file cannot exceed kb... note that the maxUploadSize attribute is not restricted to a single file, but to the sum of the total capacity of all files. -->
<Property name = "maxUploadSize" value = "800000"/>
</Bean>

5. Obtain the backend Controller

@ RequestMapping (value = "add", method = RequestMethod. POST)
Public ModelAndView add (@ FormModel TAdvertisement entity, HttpServletRequest request, @ RequestParam (value = "upload") MultipartFile file) throws Exception {
ModelAndView mav = new ModelAndView ("/demo2/show ");
String fileName = file. getOriginalFilename ();
String path = Thread. currentThread (). getContextClassLoader (). getResource (""). toString (); // obtain the project path
Path = path. replace ('/', '\'); // replace/\
Path = path. replace ("WEB-INF \ classes \", ""); // remove class \
Path = path. replace ("file:", ""); // remove the file:
Path = path. substring (1 );
Path = path + "images ";
Logger. debug ("path ========================>" + path );
Logger. debug ("fileName ==================>" + fileName );
File targetFile = new File (path, fileName );
File. transferTo (targetFile );
Logger. debug (path );
AdvertisementService. addItem (entity );
Mav. addObject ("result", "SUCCESS ");
Return mav;
}