js 实现上传文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS文件上傳</title>
</head>
<body>
<div class="img"><input type="file" class="add-img" kb_max="100"><img src="" alt="">
</div>
</body>
</html>
<script src="static/js/jquery.min.js"></script>
<script>$(".add-img").change(function () {var reads = new FileReader();var f = $(this).get(0).files[0];if (f == undefined) {console.log("請完善圖片");return;}var filesize = f.size;var maxsize = $(this).attr('kb_max');//Kvar kb_max = maxsize + 'K';if (maxsize >= 1024) {kb_max = maxsize / 1024 + 'M';}if ((filesize / 1024) > maxsize) {console.log('請上傳小于' + kb_max + '的圖片!');return;}/** js渲染 */reads.readAsDataURL(f);var that = this;reads.onload = function (e) {var _this = thisvar data = e.target.result;//加載圖片獲取圖片真實寬度和高度var image = new Image();image.src = data;// 圖片先加載完，才可以得到圖片寬度和高度image.onload = function () {console.log(_this.result);$(that).parents('.img').find('img').attr("src",_this.result)}};/** 接口上傳 */// var formData = new FormData();// formData.append("file", f);// var url = '/uploadfile';// console.log(url)// $.ajax({// url: url, /*接口域名地址*/// type: 'post',// data: formData,// contentType: false,// processData: false,// success: function (res) {// $(that).parents('.img').find('img').attr("src", res.data.url)// }// })})
</script>
總結(jié)
- 上一篇： Linux下的gpio,gpiod
- 下一篇： 一粒沙子变成芯片的全过程