前端开发常用 JS 方法

1，获取文件本地url，在上传之前预览

   /**
     * 获取图片嗯滴url，在上传之前预览
     * @param file 选择的图片文件
     * @returns {*} url
     */
    getFileLocationUrl: function (file) {
        var url = null;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

View Code

使用方法：

//html:

  <img src="{{person.HeadImgUrl}}"  style="width: 100%;height: 100%;">

//js:
 
var file = document.getElementById("up").files[0];
 $scope.person.HeadImgUrl = API.getFileLocationUrl(file);

View Code

2，ajax上传文件：

 1 /**
 2      * 上传文件
 3      * @param file input[type=file]选择的文件
 4      * @param fileName 文件名称
 5      * @param postUrl  请求的后台url地址
 6      * @param token  验证的token
 7      * @param callBack 回调（接收上传结果）
 8      */
 9      function uploadFile (file, fileName, postUrl, token, successCallBack, errorCallBack) {
10         var formData = new FormData();
11         formData.append('uploadFile', file);
12         formData.append('PicName', fileName);
13 
14         $.ajax({
15             url: postUrl,
16             data: formData,
17             dataType: "json",
18             type: "POST",
19             beforeSend: function (request) {
20                 request.setRequestHeader("Authorization", token);
21             },
22             //async: true,
23             cache: false,
24             contentType: false,
25             processData: false,
26             success: function (data) {
27                 API.log(data);
28                 successCallBack(data);
29             },
30             error: function (data) {
31                 errorCallBack(data);
32                 console.log(data);
33             }
34         });
35     }

View Code

3，去空格处理，包括文字中间的空格以及首尾的空格

/**
     * string 去空格操作
     * @param str 要去空格的字符串
     * @returns {string} 去完空格以后的字符串
     */
     function safeFilter (str) {
        return str.replace(/[ ]/g, "");
    },

    /**
    * 对一个对象中每个值进行安全检测， 去空格操作
    * @param str 要去空格的对象
    * @returns {string} 去完空格以后的对象
    */
    function everyProp (dataObj) {
        if (typeof dataObj == "string") {
            return this.safeFilter(dataObj);
        }
        for (prop in dataObj) {
            if (typeof dataObj[prop] == "object" && Array.isArray(dataObj[prop])) {
                var list = dataObj[prop];
                for (var i = 0; i < list.length; i++) {
                    list[i] = everyProp(list[i]);
                }
            } else if (typeof dataObj[prop] == "object" && (dataObj[prop]) instanceof Object) {
                dataObj[prop] = everyProp(dataObj[prop]);
            } else if (typeof dataObj[prop] == "string") {
                if (prop != "FormMeta") {
                    dataObj[prop] = safeFilter(dataObj[prop]);
                }
            }
        }
        return dataObj;
    }

View Code