建设银行悦生活网站,百度贴吧网页入口,商铺设计,眼科医院网站设计怎么做6使用input实现文件上传
// 定义一个用于文件上传的按钮input typefile nameupload1 /// accept属性用于定义允许上传的文件类型#xff0c; onchange用于绑定文件上传之后的相应函数input typefile nameupload2…使用input实现文件上传
// 定义一个用于文件上传的按钮input typefile nameupload1 /// accept属性用于定义允许上传的文件类型 onchange用于绑定文件上传之后的相应函数input typefile nameupload2 idupload accept.jpg,.jpeg,.png onchangehandleFileSelect(event) /上图所示是input type“file”渲染出来的文件上传按钮点击这个按钮计算机就会触发文件上传操作。
前端自定义input上传按钮的样式
如上图所示这是input typefile在页面上渲染出来的原生的样式但是在项目中实际使用时我们一般都会设置一个自定义的样式毕竟原生的样式通常和我们的页面风格不统一。
直接在input标签上写CSS代码不起作用在项目开发中通常使用隐藏input标签然后在input标签上层覆盖一个自定义的标签然后我们对这个自定义的标签设计样式。
div styleflex: 4 idleft-upload!-- 设置 opacity: 0;--input typefile nameupload idupload accept.jpg,.jpeg,.png stylefloat: left; opacity: 0;onchangehandleFileSelect(event) /!-- 使用div标签覆盖并自定义div的样式 --div classregion region-upload/div
/div
style.region {width: 100%;height: 100%;background-color: #fafafa;border: 1px dashed rgb(224, 219, 219);}.region-upload {z-index: 10;cursor: hand;}
/style获取input上传的文件
// 第一种方法通过document.getElementById获取
var uploadElement document.getElementById(upload1);
var file1 uploadElement.files[0];// 第二种方法通过onchane函数获取
function handleFileSelect(e){var file2 e.target.files[0];
}这两种方法效果相同获取到的是上传的File对象通过这个对象可以知道上传文件的name、size、type等数据。
文件对象类型转换
这里常用的一般有File对象、Base64对象、BLOB对象、ArrayBuffer对象这几种
File对象一般是前面的input标签上传文件之后的对象Base64 是一种由64个可打印字符组成的对二进制编码的规则这一般是个字符串。Blob是一个二进制大对象可以容纳可变数量的数据。有4中BLOB类型 TINYBLOB、BLOB、MEDIUMBLOB、LONGBLOB。这四种BLOB类型存储值的最大长度不同。ArrayBuffer 是一个字节数组用来表示通用的、长度固定的原始二进制数据缓冲区。
File to base64
// 方法一 利用URL.createObjectURL()
var file uploadElement.files[0];
var imgUrl window.URL.createObjectURL(file);// 方法二 利用FileReader.readAsDataURL()
const fr new FileReader(file);
fr.readAsDataURL(file);
fr.onload (r) {var imgUrl2 r;
}base64 to file or blob
var base data:image/png;base64,iVBORw0KGgoAAAANSU...;
// 第一种
function dataURLToFile(){const arr base.split(,);const mime arr[0].match(/:(.*?);/)[1];const bstr atob(arr[1]); // base64解码const n bstr.length;const u8arr new Unit8Array(n);while(n--){u8arr[n] bstr.charCodeAt(n);}// filereturn new File([u8arr], xxx.png, {type: mime});// blobreturn new Blob([a8arr], {type: mime});
}// 第二种
function dataURItoBlob (dataURL) { var byteString atob(dataURL.split(,)[1]); var mimeString dataURL.split(,)[0].split(:)[1].split(;)[0]; var ab new ArrayBuffer(byteString.length); var ia new Uint8Array(ab); for (var i 0; i byteString.length; i) { ia[i] byteString.charCodeAt(i); } return new Blob([ab], {type: mimeString});
}Blob to ArrayBuffer
var blob new Blob([1,2,3,4])
var reader new FileReader();
reader.onload function(result) {console.log(result);
}
reader.readAsArrayBuffer(blob);ArrayBuffer to Blob
var blob new Blob([buffer])JS BOM API FileReader
大部分的前端文件格式转换都可以通过FileReader对象的API来实现FileReader API FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件或原始数据缓冲区的内容使用 File 或 Blob 对象指定要读取的文件或数据。
