無重新整理上傳檔案

標籤：無重新整理上傳檔案

用js給出一個上傳檔案時不用重新整理頁面的方案

 <input id="upload" type="file"/> <button id="upload-btn">upload</button>

    document.getElementById(‘upload-btn‘).onclick = function(){          var oInput = document.getElementById(‘upload‘);          var file = oInput.files[0];       //選取檔案        var formData = new FormData();   //建立表單資料對象        formData.append(‘file‘,file);    //將檔案添加到表單對象中        fetch({                          //傳輸            url:‘./‘,            mothod:‘POST‘,            body:formData         })         .then((d)=>{        console.log(‘result is‘,d);        alert("上傳完畢！")        })    }

實現這麼一個效果：

使用HTML+CSS實現布局，border-width:5px，格子大小是50px*50px，hover時，邊框變成紅色，需要考慮語義化。

650) this.width=650;" src="https://uploadfiles.nowcoder.com/images/20170728/826546_1501229843213_D08DA487E4BE8F2E89257E85D2DDD1EE" style="border:0px;vertical-align:middle;" />

        table{            border-collapse:collapse;   /* 為表格設定合并邊框模型 */            margin:50px;            text-align:center;  /* 設定文字置中 */        }          table tr{            border:none;        }         table.tab td{            width:50px;            height:50px;            border:5px  inset blue;        }         table.tab td:hover{            border:5px solid red;            cursor: pointer;        }

        <table class="tab">        <tr>            <td>1</td>            <td>2</td>            <td>3</td>        </tr>        <tr>            <td>4</td>            <td>5</td>            <td>6</td>        </tr>        <tr>            <td>7</td>            <td>8</td>            <td>9</td>        </tr>    </table>

無重新整理上傳檔案