前端代码 · 杨刚的个人网站

图片文件上传预览

2023-11-11·282 字·1 分钟· loading · loading

代码块前端代码

//在input file内容改变的时候触发事件 $("#filed").change(function(){ //获取input file的files文件数组; //$('#filed')获取的是jQuery对象，.get(0)转为原生对象; //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0]; var file = $('#filed').get(0).files[0]; //创建用来读取此文件的对象 var reader = new FileReader(); //使用该对象读取file文件 reader.readAsDataURL(file); //读取文件成功后执行的方法函数 reader.onload=function(e){ //读取成功后返回的一个参数e，整个的一个进度事件 console.log(e); //选择所要显示图片的img，要赋值给img的src就是e中target下result里面 //的base64编码格式的地址 $('#imgshow').get(0).src = e.target.result; } })

vue实现全选

2023-11-11·135 字·1 分钟· loading · loading

代码块前端代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <p> 全选： </p> <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">{{checked}} <p> 多个复选框： </p> <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">Runoob <input type="checkbox" id="google" value="Google" v-model="checkedNames">Google <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">taobao<br> 选择的值为:{{checkedNames}} </div> </body> <script> new Vue({ el: '#app', data: { checked: false, checkedNames: [], checkedArr: ["Runoob", "Taobao", "Google"] }, methods: { changeAllChecked: function() { if (this.checked) { checkedNames = []; this.checkedNames = this.checkedArr; } else { this.checkedNames = []; } } }, watch: { "checkedNames": function() { if (this.checkedNames.length == this.checkedArr.length) { this.checked = true; } else { this.checked = false; } } } }) </script> </html>

table2excel

2023-11-11·257 字·1 分钟· loading · loading

代码块前端代码

1、项目导入依赖 # 下载地址：https://codechina.csdn.net/mirrors/rainabba/jquery-table2excel

js中string和date互转

2023-11-11·97 字·1 分钟· loading · loading

代码块前端代码

js字符串转换成Date # 输入的时间格式为yyyy-MM-dd # function convertDateFromString(dateString) { var date = new Date(dateString.replace(/-/,"/")) return date; } 输入的时间格式为yyyy-MM-dd hh:mm:ss # function convertDateFromString(dateString) { var arr1 = dateString.split(" "); var sdate = arr1[0].split('-'); var date = new Date(sdate[0], sdate[1]-1, sdate[2]); return date; } Date转字符串 # (new Date()).Format("yyyy-MM-dd hh:mm:ss.S")

js获取地址栏参数

2023-11-11·43 字·1 分钟· loading · loading

代码块前端代码

//variable为地址栏中字段名 function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); }

axios实现post文件下载

2023-11-11·181 字·1 分钟· loading · loading

代码块前端代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <button id="b">donwload</button> </body> </html> // 处理Blob数据下载 function executeDownload(data, fileName) { if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])); let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', fileName); document.body.appendChild(link); link.click(); document.body.removeChild(link); alert("download success") } let url = "http://example" let params = {} // 发送请求，接收文件数据并解析文件名 $("#b").click(function(){ axios.post( url, params, {responseType: 'blob'} ) .then(res => { let reader = new FileReader(); let data = res.data; reader.onload = e => { if (e.target.result.indexOf('Result') != -1 && JSON.parse(e.target.result).Result == false) { // 进行错误处理 } else { // 获取响应，前后端分离需要后端主动暴露响应头 // resp.setHeader("Access-Control-Expose-Headers", "Content-Disposition"); let contentDisposition = res.headers['content-disposition']; if (contentDisposition) { fileName = window.decodeURI(res.headers['content-disposition'].split('=')[1], "UTF-8"); } executeDownload(data, fileName); } }; reader.readAsText(data); }) })

2025

2023