Summary of Extjs file uploads and extjs file uploads
Originally, file upload is a simple and common function. However, due to my new access to extjs, I am not familiar with the controls in extjs and their usage methods. As a result, I can solve the File Upload problem quickly, it took nearly two days. The problems and solutions are provided for reference in the expo park with the same troubles. It's just the first time I published a document. If there is anything wrong with it, I hope you can see Hai Han.
Problem description: When a file is uploaded and response is returned after the file is uploaded successfully in the IE browser, the callback function reports an error: The success attribute of null or null cannot be called.
First, let's look at the code of extjs:
<Html xmlns = "http://www.w3.org/1999/xhtml">This is a simple Extjs code for file upload. Due to testing, the writing is messy. After clicking upload, call the background file upload code:
Public void UploadFile (HttpContext context) {try {HttpFileCollection fileList = context. request. files; if (fileList. count> 0) {String fileName = fileList [0]. fileName; // The name of the file to be captured in the IE browser. Because the full path of the uploaded file is obtained, fileName = fileName is not required in other browsers. substring (fileName. lastIndexOf ("\", StringComparison. ordinal) + 1); String uploadFilePath = context. server. mapPath ("/upload"); String fileSavePath = uploadFilePath + "\" + fileName; if (File. exists (fileSavePath) {File. delete (fileSavePath);} fileList [0]. saveAs (fileSavePath); context. response. write ("{success: true, Msg: \" File Uploaded successfully \ "}");} else {context. response. write ("{success: false, Msg: \" select a file to be uploaded \ "}") ;}} catch (Exception ){}}In this way, the file upload operation can be completed. However, if my program runs on ie, an error is returned. Always prompted here in the ext-all-debug.js error:
OnSuccess: function (response) {var form = this. form, success = true, result = this. processResponse (response );If (result! = True &&!Result. success ){If (result. errors) {form. markInvalid (result. errors);} this. failureType = Ext. form. action. action. SERVER_INVALID; success = false;} form. afterAction (this, success );},
If the result is null, the success attribute of the null value cannot be called. The reason is that the value of responseText of the returned response object is automatically added by ie due to the <pre> label.
As a result, at this. processResponse (response), there is no way to parse a string into json format, so an error is reported in the source code of the ext-all-debug.js.
It should be declared that this code is no problem in Google, Firefox and other browsers. I believe there is no problem in some ie, and it may occur in the higher version of ie.As a matter of fact, it is relatively simple to solve the problem. You only need to set a contentType attribute for the response object when the background code returns json. The Code is as follows:
Public void UploadFile (HttpContext context) {try {HttpFileCollection fileList = context. request. files; if (fileList. count> 0) {String fileName = fileList [0]. fileName; // The name of the file to be captured in the IE browser. Because the full path of the uploaded file is obtained, fileName = fileName is not required in other browsers. substring (fileName. lastIndexOf ("\", StringComparison. ordinal) + 1); String uploadFilePath = context. server. mapPath ("/upload"); String fileSavePath = uploadFilePath + "\" + fileName; if (File. exists (fileSavePath) {File. delete (fileSavePath);} fileList [0]. saveAs (fileSavePath); context. response. contentType = "text/html"; context. response. write ("{success: true, Msg: \" File Uploaded successfully \ "}");} else {context. response. write ("{success: false, Msg: \" select a file to be uploaded \ "}") ;}} catch (Exception ){}}In this way, the response information of the response object can be output in ie as is. Hope to help bloggers who encounter the same problem. Good night, everyone.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
