js 導出json文件，讀取json文件，拖拽預覽圖片

將數據導出爲json文件

<div id="download">導出</div>

    <script>

        var download = document.getElementById('download');
        download.addEventListener("click", () => downLoadFiles({ name: 111 }, 'test.json'), false);
        /**
         * 
         * @param {any} data 要導出的數據
         * @param {string} fileName 導出的文件名
         */
        const downLoadFiles = (data, fileName) => {
            if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob) {
                //兼容ie10
                var blob = new Blob([JSON.stringify(data)], {
                    type: "data:application/json;charset=utf-8"
                });
                navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
                const a = document.createElement("a");
                a.style.visibility = "hidden";
                document.body.appendChild(a);
                var blobs = new Blob([JSON.stringify(data)], {
                    type: "data:application/json;charset=utf-8"
                });
                var objurl = URL.createObjectURL(blobs);
                a.href = objurl;
                // a.href = "data:application/json;charset=utf-8" + JSON.stringify(data, null, 2);  // 使用這種方式會導出文件失敗net error，緣由在於協議不一樣沒法跨域
                a.download = fileName;
                a.click();
                document.body.removeChild(a);
            }
        };
    </script>
複製代碼

讀取本地json文件

<div id="read">讀取</div>

    <script>
        /**
          * 利用input標籤的type=file屬性來讀取文件,點擊綁定preImport事件的元素會讓用戶從本地目錄選取文件，input標籤的multiple屬性支持一次選取多個文件
          */
        var preImport = () => {
            console.log('duqu');
            const id = "files";
            const input = document.createElement("input");
            input.id = id;
            input.type = "file";
            document.body.appendChild(input);
            input.onchange = () => importFile(id);
            input.click();

        };

        var importFile = (inputId) => {
            var files = document.getElementById(inputId);
            var selectedFile = files.files[0];
            var name = selectedFile.name; // 文件名

            var reader = new FileReader(); //這裏是核心！！！讀取操做就是由它完成的。
            reader.readAsText(selectedFile); //讀取文件的內容
            reader.onload = function () {
                console.log(JSON.parse(this.result)); //此時文件的內容存儲到了result中。直接操做便可。
            };

        };
        var read = document.getElementById('read');
        read.addEventListener("click", preImport, false);
    </script>

複製代碼

使用拖放操做來選擇要讀取的圖片並預覽

<div id="drop_zone" style="width: 400px;height: 400px;border:1px solid #000">Drop files here</div>
    <div id="list" style="width: 200px;height: 200px;border:1px solid red"></div>

    <script>
        window.onload = function () {

            var dragZone = document.getElementById('drop_zone');
            dragZone.addEventListener("dragover", handleDragOver, false);
            dragZone.addEventListener("drop", handleFileSelect, false);

            function handleFileSelect(e) {
                e.stopPropagation();
                e.preventDefault();

                var files = e.dataTransfer.files; // file list

                var output = [];
                for (var f of files) {
                    var reader = new FileReader();
                    reader.readAsDataURL(f);
                    //讀取文件的內容
                    reader.onload = function () {
                        var img = document.createElement("img");
                        img.src = this.result;//將圖片base64字符串賦值給img的src
                        img.style = 'width: 100px;height:auto';
                        document.getElementById("list").appendChild(img);
                    };

                }

            }

            function handleDragOver(e) {
                e.stopPropagation();
                e.preventDefault();
            }

        }

    </script>

複製代碼