How to solve the problem of Jquery AjaxFileUpload. js uploading files? ajaxfileupload. js

How to solve the problem of Jquery AjaxFileUpload. js uploading files? ajaxfileupload. js

<Span style = "font-family: Arial, Helvetica, sans-serif; background-color: rgb (255,255,255);"> import the AjaxFileUpload. js file </span>

Js Code

$. AjaxFileUpload ({url: 'upload', // processing image script secureuri: false, fileElementId: 'uploadimg ', // file Control id data: {photoType: photoType }, // parameter dataType: 'json', // The parameter is capitalized. Otherwise, Google may report success: function (data, status) {data = jQuery. parseJSON (data); $ ("# hideImgPath "). val (data. filePath); alert ("image uploaded successfully! ") ;}, Error: function (data, status, e) {alert (" Image Upload Failed! Please try again later! ");}});

Html code

<Span class = "d"> <input type = "file" id = "uploadImg" name = "uploadImg" value = ""/> <input type = "button" id = "uploadImgButton" onclick = "uploadSaveImg (); "value =" Confirm upload "/> <input type =" hidden "value =" "id =" hideImgPath "name =" hideImgPath "/> </br> the format is generally GIF or JPEG, the size is 100*100 pixels. </span>

Problem 1: when using the springMVC framework, ie will directly download the returned data

Solution: add the following configuration information to the springMVC configuration file:

<! -- When IE executes AJAX, the downloaded file is returned in JSON --> <bean id = "mappingJacksonHttpMessageConverter" class = "org. springframework. http. converter. json. mappingJacksonHttpMessageConverter "> <property name =" supportedMediaTypes "> <list> <value> text/html; charset = UTF-8 </value> </list> </property> </bean>

Also set the type of returned data: response. setContentType ("text/plain; charset = UTF-8 ");

Problem 2: The returned data contains the <pre> label.

Solution: Change eval ("data =" + data) in the AjaxFileUpload. js file to data = jQuery. parseJSON (jQuery (data). text ());

At this time, if the page still cannot be parsed, convert the returned data to Json again. data = jQuery. parseJSON (data );

Problem 3: When springMVC is used, the backend cannot receive the File at the front end. An error is returned:

Nested exception is java. lang. NoClassDefFoundError:Org/apache/commons/io/output/DeferredFileOutputStreamat
Org. springframework. web. servlet. DispatcherServlet. triggerAfterCompletionWithError (DispatcherServlet. java: 1259)
At org. springframework. web. servlet. DispatcherServlet. doDispatch (DispatcherServlet. java: 945)
At org. springframework. web. servlet. DispatcherServlet. doService (DispatcherServlet. java: 856)
At org. springframework. web. servlet. FrameworkServlet. processRequest (FrameworkServlet. java: 915)
At org. springframework. web. servlet. FrameworkServlet. doPost (FrameworkServlet. java: 822)

Java. lang. ClassNotFoundException:Org. apache. commons. io. output. DeferredFileOutputStream
At org. apache. catalina. loader. WebappClassLoader. loadClass (WebappClassLoader. java: 1358)
At org. apache. catalina. loader. WebappClassLoader. loadClass (WebappClassLoader. java: 1204)
At org. apache. commons. fileupload. disk. DiskFileItemFactory. createItem (DiskFileItemFactory. java: 199)

Solution: 1. Add a commons-io-1.3.1.jar package, which is the package on which the upload depends.

2. After adding this package, the system still prompts that the package cannot be found for two reasons: ①. tomcat did not load this package. Please check this package under tomcat. ② If this package conflicts

Delete the jar package of the same name

An error occurred while using jquery's ajaxfileuploadjs and struts2 to upload new files

The getXXX method is to get the parameter value from the session. From the code you posted, This is not involved, so I think if you use System. out. println ("userIcon:" + getId_userIcon (); no id is obtained ·
For more information, see ~

Reference (ajaxfileuploadjs) ajaxfileuploadjs reports this error jQueryhandleError is not a function

When I was doing ajaxFileUpload, I also encountered this problem. At the same time, I had other problems. I spent one afternoon solving them:
Question 1: As the landlord said, jQuery. handleError is not a function is because handlerError exists only in versions earlier than the jquery-1.4.2, and does not exist in both jquery-1.6 and 1.7, so this function is copied to ajaxFileUpload in 1.4.2. solve the problem in js
HandleError: function (s, xhr, status, e ){
// If a local callback was specified, fire it
If (s. error ){
S. error. call (s. context | s, xhr, status, e );
}

// Fire the global callback
If (s. global ){
(S. context? JQuery (s. context): jQuery. event). trigger ("ajaxError", [xhr, s, e]);
}
},
Problem 2: the error is always returned and the specified success method cannot be executed. By tracking the execution process of ajaxFileUpload, it is found that when calling its own uploadHttpData function, when executing if (type = "json") eval ("data =" + data );
An exception is thrown, causing status = "error" to be executed during exception handling. Therefore, the error method is always executed.
Online query, I learned that the eval function is used to execute a piece of js Code, rather than reverse decoding the json string as I thought.
Eval ("data =" + data); Means to assign data to the data parameter, but when I return a simple string to the page, such as "OK, in this way, an exception is thrown. Finally, change it to eval ("data = \" "+ data +" \ ""). The returned data is enclosed in double quotation marks as a string and then assigned to data. Finally succeeded...
Post it, hoping to help others who have encountered the same problem.