ExtJS File Upload Problem summary

Source: Internet
Author: User
Tags httpcontext

Originally file upload is a simple and commonly used function, but, because just contact extjs, the control in the ExtJS and its use is not familiar with, resulting in a very quickly can fix the file upload problem, get nearly two days of Time. Problems and solutions are now issued for reference by the same troubled Bo Yuan. Just my first posting, if there is something wrong, I hope you haihan.

Problem description: in the file upload, in the Internet explorer, the file upload after successful return response, the callback function directly error: cannot call null or null value of the success Property.

First look at the ExtJS code:

"http://www.w3.org/1999/xhtml">"Server"><meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/> <title></title> <link href="Content/extjs/resources/css/ext-all.css"Rel="stylesheet"/> <script src="Content/extjs/ext-all-debug.js"Type="Text/javascript"></script> <script src="Content/extjs/ext-lang-zh_cn.js"Type="Text/javascript"></script> <script type="Text/javascript">Ext.onready (function () {varUploadform = Ext.create ('Ext.form.Panel', {width: -, Height: -, Items: [{xtype:'Filefield', Fieldlabel:'File Upload', Labelwidth: the, Msgtarget:'side', Allowblank:false, Margin:'10,10,10,10', Anchor:'100%', Buttontext:'Select File'}], buttons:[{text:'Upload', handler:function () {uploadform.getform (). Submit ({ Url:'extformsubmitajax.ashx',                            params: {action:'UploadFile'}, success:function (form, Action) { varJsonresult =Ext.JSON.decode (action.response.responseText); if(jsonresult.success) {} Ext.Msg.alert ('Tips', jsonresult.msg);                    }                        }); }}, {text:'Cancel', Handler:function () {}}], Buttonalign:'Center'            }); varMainpanel = Ext.create ('Ext.panel.Panel', {renderto:'Layoutdiv', Width: -, Height: max, Margin:'50,50,50,50', Items: [uploadform]});    }); </script>"Layoutdiv"></div></body>

This is a simple file upload ExtJS code, due to test, write a little Messy. When you click upload, Call the background file upload code:

 public voiduploadfile (httpcontext Context) {Try{httpfilecollection fileList=Context.                request.files; if(filelist.count >0) {String FileName= filelist[0].                    FileName; //the file name needs to be intercepted under ie, because the full path of the uploaded file is obtained, and the other browsers do not need to interceptFileName = filename.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 upload succeeded \"}"); }                Else{context. Response.Write ("{success:false,msg:\ "please Select a file to upload \"}"); }            }            Catch(Exception) {}}

Supposedly this will be able to complete the file upload operation, however, my program runs on ie, is an Error. has been prompted in the ext-all-debug.js here error:

    Onsuccess:function (response) {        var form = this. form,            Success = True,            result = this. ProcessResponse (response);         If (result!== true &&!   if (result.errors) {                form.markinvalid (result.errors);            }            This.failuretype = Ext.form.action.Action.SERVER_INVALID; success = False;} form.afteraction (this, success); },

The hint result is null and the success property of the null value cannot be called. In fact, the reason is that the responsetext value of the returned response object is automatically added by IE to a <pre> tag.
Results in This.processresponse (response), there is no way to parse a string into JSON format, so ext-all-debug.js source will be an Error.
To declare, this code in google, Firefox and other browsers do not have problems, I believe that in some of the IE is not a problem, may encounter the high version of IE will appear such a wonderful problem.

In fact, knowing the problem, the solution is relatively simple. We just have to set a ContentType property for the response object when the backend code returns json, and the code is as Follows:

 public voiduploadfile (httpcontext Context) {Try{httpfilecollection fileList=Context.                request.files; if(filelist.count >0) {String FileName= filelist[0].                    FileName; //the file name needs to be intercepted under ie, because the full path of the uploaded file is obtained, and the other browsers do not need to interceptFileName = filename.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 upload succeeded \"}"); }                Else{context. Response.Write ("{success:false,msg:\ "please Select a file to upload \"}"); }            }            Catch(Exception) {}}

In this way, IE can output the response Object's response information as it is. I hope you have some help with the same problem, good night, everyone.

ExtJS File Upload Problem summary

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.