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