cordova+jquery form上传里面的一些诡异坑

在浏览器里面执行很正常的代码，打包到手机上测试就出问题了，浏览器中的执行版本如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>up test</title>
 6 </head>
 7 <body>
 8     <h1>上传测试</h1>
 9     <p></p>
10     <br>
11     <form enctype="multipart/form-data" id="doUpfile">
12         <input type="file" name="file">
13     </form>
14     <button id="yes">Do it!</button>
15     <script src="./libs/jquery.js"></script>
16     <script src="./libs/jquery.form.js"></script>
17     
18     <script>
19     window.localStorage.removeItem("token");
20     var userinfo="username=test&password=123";
21     $.ajax({
22         "url":"http://192.168.1.1:9090/common/users/logon",
23         "type":"POST",
24         "crossDomain":true,
25         "data":userinfo,
26         "success":parse1
27     })
28     function parse1(data1){
29         window.localStorage.setItem("token",data1);
30         alert("新的token:"+window.localStorage.getItem("token"));        
31     }
32     alert("token值是："+window.localStorage.getItem("token"));
33     alert(userinfo);
34     var options={
35             "url":"http://192.168.1.1:9090/club_activity/club/image/clubImage?authToken="+window.localStorage.getItem("token"),
36             "type":"POST",
37             "success":parse2,
38             "error":parse3
39         }
40         
41     $("#yes").on("click",upSubmit);
42     function upSubmit(){
43         $(function(){
44             $("#doUpfile").ajaxSubmit(options);
45         })
46     }
47     function parse2(data2){
48         console.log(data2);
59         alert("上传成功，图片返回值为："+data2);
60         alert(JSON.stringify(options));
61     }
62     function parse3(data3){
63         alert("上传出错，原因为："+data3);
66         alert(JSON.stringify(data3));
67         alert(JSON.stringify(options));
68         alert("token值是："+window.localStorage.getItem("token"));
69     }
70     </script>
71 </body>
72 </html>

最初的问题是进入app后点击上传选择文件时，如果直接选择文件的话app就崩溃了，但是如果从侧边栏选择进入“图库”，再在图库里面选择相册，进入相册之后再点选图片，就可以正常选择图片了（这是第一个诡异的地方），直到现在都不知道是为什么。

第二个问题是每次进入app之后弹出来的token是Null（这说明第19行的代码此时已经被执行过了），再弹出userinfo的值，过后再弹出“新的token是:xxxxxx”，也就是说第32行的代码先于第21行的ajax请求执行了（这里代码执行顺序为19-32-33-21），当然也可能不是先于ajax执行，而是先于ajax里面的回调函数parse1执行了。

然后针对第二个问题，一开始以为是localStorage的写法问题，因为刚开始我用的是window.localStorage.key=value的方式来对localStorage存取的，但是后来在stackoverflow上查到在手机上据说是要这么写window.localStorage.setItem(key,value),window.localStorage.getItem(key),window.localStorage.removeItem(key)，或者window.localStorage.[key]=value的方式，于是乎改成用setItem()来设置值，但是上传还是失败了，还是因为token的问题导致身份验证失败。仔细一看，每次提交请求的时候，带上的token都是上次的token，但是每次进入app的时候都会发一次请求获得新的token，猜想可能是js代码在浏览器上和在手机上的解析方式不太一样（虽然都是webkit内核，但肯定会有所区别）。

为了验证猜想，加了几条打印代码，作为调试用：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>up test</title>
 6 </head>
 7 <body>
 8     <h1>最新上传测试 version 12-11-options单独定义</h1>
 9     <p></p>
10     <br>
11     <form enctype="multipart/form-data" id="doUpfile">
12         <input type="file" name="file">
13     </form>
14     <button id="yes">Do it!</button>
15     <script src="./libs/jquery.js"></script>
16     <script src="./libs/jquery.form.js"></script>
17     
18     <script>
19     window.localStorage.removeItem("token");
20     var userinfo="username=pengli&password=pengli";
21     $.ajax({
22         "url":"http://192.168.1.1:9090/common/users/logon",
23         "type":"POST",
24         "crossDomain":true,
25         "data":userinfo,
26         "success":parse1
27     })
28     function parse1(data1){
29         window.localStorage.setItem("token",data1);
30         alert("新的token:"+window.localStorage.getItem("token"));        
31     }
32     alert("第32行，现在的token值是："+window.localStorage.getItem("token"));
33     alert(userinfo);
34     
35     var options={
36             "url":"http://192.168.1.1:9090/club_activity/club/image/clubImage?authToken="+window.localStorage.getItem("token"),
37             "type":"POST",
38             "success":parse2,
39             "error":parse3
40         }
41     alert("第41行，options里面的操作:"+options["url"]);    
42     $("#yes").on("click",upSubmit);
43     function upSubmit(){
44         $(function(){
45             $("#doUpfile").ajaxSubmit(options);
46         })
47     }
48     function parse2(data2){
49         console.log(data2);
50         alert("上传成功，图片返回值为："+data2);
51         alert("最后的token值是："+window.localStorage.getItem("token"));
52         alert(JSON.stringify(options));
53     }
54     function parse3(data3){
55         alert("上传出错，原因为："+data3);
56         alert(JSON.stringify(data3));
57         alert(JSON.stringify(options));
58         alert("最后的token值是："+window.localStorage.getItem("token"));
59     }
60     </script>
61 </body>
62 </html>

在手机里面，代码的执行顺序为：先弹出第32行（现在的token值是Null，当然，这说明19行是最先执行的），紧接着弹出第33行的userinfo值，第三次是执行第41行的代码（第41行，options里面的操作:http://192.168.1.1:9090/club_activity/club/image/clubImage?authToken=null)，最后弹出第30行的代码（新的token值是xxxxx）。

而在浏览器中，执行的效果为：第32行（现在的token为Null），紧接着是第30行（新的token值是xxxx，说明此时已经取到了token），再然后是执行第33行代码，弹出Userinfo的值，最后是第41行代码，Options操作里面的token已经不是Null，而是获取到的token了。也就是说，Js在浏览器和在手机上的执行确实存在顺序上的不一致，这种解析方式的差异，多半就是webkit内核不同导致的。

解决方式有两种：第一种是单独另写一个登陆页，现在这个页面发起请求获得token，然后再进入文件上传页面上传文件。另一种，如果非得把上传和提交写在一个页面里面，那就不能把$.ajaxSubmit()的操作单独定义出来，而是要直接传进去，即：

 1 function upSubmit(){
 2         $(function(){
 3             $("#doUpfile").ajaxSubmit({
 4             "url":"http://192.168.1.1:9090/club_activity/club/image/clubImage?authToken="+window.localStorage.getItem("token"),
 5             "type":"POST",
 6             "success":parse2,
 7             "error":parse3
 8             });
 9         })
10     }

还有需要注意的一个地方是，使用cordova打包app时，需要加入whitelist插件，否则上传会一直返回404错误，具体的请参考：http://gxxsite.com/content/view/id/197.html

另外由于在手机上传文件，需要文件访问权限，cordova打包时还需要加入cordova-plugin-file和cordova-plugin-file-transfer两个插件。

有关cordova打包的具体细节，参考这里：http://blog.csdn.net/g252691665/article/details/50259471