地址栏特殊字符参数转义

我是搬运工，参照文章：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)，将里面的/转义，就可以修复这个问题。