做网站投广告攻略,个人网站设计流程步骤,嵌入式软件开发有哪些,新河网站建设需求
点击上传图片#xff0c;或直接拖拽图片到红色方框里面也可上传图片#xff0c;上传后预览图片
效果 实现
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport content上传图片或直接拖拽图片到红色方框里面也可上传图片上传后预览图片
效果 实现
!DOCTYPE html
html langzh-cnheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图片文件拖拽上传/titlestyle* {margin: 0;padding: 0;}img {display: block;width: 200px;height: auto;}.show-img {display: flex;justify-content: center;align-items: center;width: 800px;height: 320px;margin: 100px auto;border: 1px solid red;}.container {display: flex;}.upload {position: relative;width: 100px;height: 100px;border: 2px dashed #ccc;}.upload::before,.upload::after {content: ;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;background-color: black;}.upload::before {width: 20px;height: 4px;}.upload::after {width: 4px;height: 20px;}/* 触发file类型的Input上传文件不一定要点击上传按钮点在Input身上即可 */#file-input {opacity: 0;box-sizing: border-box;width: 100px;height: 100px;}.preview {position: relative;width: 100px;height: 100px;margin: 0 20px;border-radius: 5px;}.preview-img {width: 100%;height: 100%;}.delete {position: absolute;width: 10px;height: 10px;top: -5px;right: -5px;color: red;}/style
/headbodyform classcontainer actiondiv classuploadinput typefile idfile-input hidden/divdiv classshow-box/div/formdiv classshow-img/divscriptlet input document.querySelector(input[typefile]);let showImg document.querySelector(.show-img);let imgInput document.querySelector(#file-input);let uploadBox document.querySelector(.upload);//点击别的位置调用inputFile功能uploadBox.addEventListener(click,function(e){imgInput.click();},false);//拖拽上传showImg.addEventListener(dragover,function(e){e.preventDefault();},false);showImg.addEventListener(drop,function(e){e.preventDefault();let file e.dataTransfer.files[0];createBolbFile(file)},false);//点击input上传input.addEventListener(change, function (e) {console.log(input.files[0]);//拿到input当前上传的文件拿不到url想在页面展示必须有urllet file this.files[0];// createFileReader(file);createBolbFile(file)}, false);function createImg(src){let img document.createElement(img);img.src src;showImg.append(img);}//生成临时blob存储function createBolbFile(file){let url URL.createObjectURL(file); //生成一个临时地址blob不可持续//创建一个url的blob 在当前会话下生效不像base64那样在哪里都能用如在浏览器中用当你关掉浏览器再开浏览器用则不生效是一种临时文件createImg(url)}//base64存储function createFileReader(file) {let fileReader new FileReader();//通过FileReader的result可以拿到文件的urlfileReader.readAsDataURL(file);//把文件创建成url的data对象fileReader.onload function () { //file加载完成才可以拿到urllet src this.result //base64存储createImg(src);}}/* base64存储base64是新的文件协议格式传输8bit字节码的编码方式借助64个可以表示字符[A,B,C...1,2,3] 转换二进制 base64 字符串通用性很强 不依赖平台 不依赖环境 可持续 可以以字符串的形式传输图片、文档等可以很方便的用来展示图片下载文档-----------------------------------------------blob存储如果要持续存储用base64只是临时调用用blobblob网址URL只能在浏览器内部生成 URL/Object 允许Blob 和 file对象用作图像上 二进制数据连接URL源 URL.createObjectURL(file) 生成地址同一个会话中 同一个浏览器实例中可以使用 临时的对象地址 不可持续*//script
/body/html
