地址欄特殊字符參數轉義

我是搬運工，參照文章：http://www.cnblogs.com/artwl/archive/2012/03/07/2382848.html

 

相關的轉義功能如何實現可以參照上面的文章，這里我主要論述發現問題的過程。

根據測試的反饋，相關圖片上傳功能有時失敗有時候成功。代碼如下：

var url = location.href.substring(0, location.href.lastIndexOf("/"));
            var params = {
                uploadServerUrl: url.substring(0, url.lastIndexOf("/")) + "/blyj/TravelUpload.aspx?tid=" + id, //上傳響應頁面(必須設置)
                uploadBytesServerUrl: url.substring(0, url.lastIndexOf("/")) + "/blyj/TravelUpload.aspx?tid=" + id,
                imageWidth: 1024,             //設置圖片縮放寬度
                minFileSize: 400,             //最小圖片大小KB
                imageQuality: 80,
                jsFunction: "upload",         //上傳成功后回調JS
                filter: "*.jpg;*.png;*.bmp;*.jpeg",         //上傳文件類型限制
                userId: '<%=userId %>',
                travelDate: '<%=travelDate %>'
            }
            //alert(params["uploadServerUrl"]);
            swfobject.embedSWF("../js/flashUpload/uploadImage.swf", "myContent", "100%", "500", "10.0.0", "../js/flashUpload/expressInstall.swf", params);

通過重現和查閱代碼發現，失敗的都是在url中帶了日期參數，用fiddler攔截請求，發現傳遞的url變成了

POST /WebJourneyShow/blyj/TravelUploadImg.aspx?travelDate=2017/blyj/TravelUpload.aspx?tid=5036&userId=7&travelDate=2017/3/31%200:00:00&random=0.6985774147324264&gpsSuccess=false&dateTimeSucess=false&dateTime=null&editTimeSucess=true&editTime=2017-03-31%2014:42:27&lon=undefined&lat=undefined&fileName=2%E5%8F%96%E5%90%8D%E9%A1%B5.jpg HTTP/1.1

地址出錯，導致響應界面無法做出正常處理。分析可知，如果上述代碼中的location.href是：/WebJourneyShow/blyj/TravelUploadImg.aspx?travelDate=2017/3/31，通過substring(0, location.href.lastIndexOf("/"))就會截取為/WebJourneyShow/blyj/TravelUploadImg.aspx?travelDate=2017/3/而不是我們希望的/WebJourneyShow/blyj，加上 其他參數就會變成上面錯誤的url導致出錯。

在這里，我做的處理僅僅時將date轉義，也就是encodeURIComponent(date)，將里面的/轉義，就可以修復這個問題。