js 图片上传给后台的3种格式
1. file格式 (创建formData来完成file上传)
我们的接口需求:
代码:
<input type="file" id="imgfile" accept="image/jpeg, image/png, image/jpg" > $("#imgfile").change(function () {
var formData = new FormData();
$.each($('#imgfile')[0].files, function (i, file) {
formData.set('idcard', file); //idcard 字段 根据自己后端接口定
});
//processData: false, contentType: false,多用来处理异步上传二进制文件。
that.$indicator.open();
$.ajax({
url: 'http://wjtest.jecinfo.cn:9090/indentity/check',
type: 'POST',
data: formData, // 上传formdata封装的数据
dataType: 'JSON',
cache: false, // 不缓存
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
success:function (data) {
if(data.code =='0'){ } }
}); });
2. base64格式
<input type="file" id="imgfile"> var base64Pic = ''
document.getElementById('imgfile').onchange = function(){
var fileReader = new FileReader();
fileReader.readAsDataURL(this.files[0]);
fileReader.onload = function(){
base64Pic = fileReader.result;
console.log(base64Pic ) //base64 可以直接放在src上 预览
}
3. Blob流格式
base64转换为blob流
function dataURItoBlob(base64Data) {
//console.log(base64Data);//data:image/png;base64,
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);//base64 解码
else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png // var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
// var ia = new Uint8Array(arrayBuffer);//创建视图
var ia = new Uint8Array(byteString.length);//创建视图
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
}
更多参考链接: https://blog.csdn.net/qq_34664239/article/details/94595508
https://blog.csdn.net/qq_34664239/article/details/94601498
js 图片上传给后台的3种格式的更多相关文章
- MVC 手机端页面 使用标签file 图片上传到后台处理
最近刚做了一个头像上传的功能,使用的是H5 的界面,为了这个功能搞了半天的时间,找了各种插件,有很多自己都不知道怎么使用,后来只是使用了一个标签就搞定了:如果对样式没有太大的要求我感觉使用这个就足够了 ...
- 前端js图片上传
前端js图片上传,原理用input type="file"获取图片然后把图片转换成base64编码传到后台. 图片上传 <!DOCTYPE html><html& ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- layui图片上传之后后台如何修改图片的后缀名以及返回数据给前台
const pathLib = require('path');//引入node.js下的一个path模块的方法,主要处理文件的名字等工作,具体可看文档 const fs = require(''fs ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- 微信JS图片上传与下载功能--微信JS系列文章(三)
概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...
- js图片上传 的方法
先规划出框架 <div id="AQA" style="width:300px; height:200px; background-color:aquamarine ...
- js 图片上传
可能很多不熟悉的图片上传的同学会觉得有点懵,其实做过一次你就会发现特别的简单. 只是一个formData格式的表单提交,把地址写到 action = "" 里面就可以了,当然你可以 ...
- 一个node.js图片上传显示小应用
文件结构如下: 实现的功能有: 可以通过浏览器使用. 当请求http://domain/start时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 用户可以选择一个图片并提交表单,随后文件将被上 ...
随机推荐
- Sublime Text3中文环境设置
Sublime Text3中文环境设置 1.首先打开安装好的的Sublime软件,选择Preferences下面的Package Contorol选项出现弹窗方框 2.在弹窗输入install pac ...
- laravel 怎么获取public路径
app_path() app_path函数返回app目录的绝对路径: $path = app_path(); 你还可以使用app_path函数为相对于app目录的给定文件生成绝对路径: $pa ...
- nginx 如何访问php文件
1.进入nginx安装路径,我的是/usr/local/nginxvi conf/nginx.conf将 location ~ \.php$ { root html; fastcgi_pass 127 ...
- Java的jstat命令使用详解
jstat命令简介 jstat(Java Virtual Machine Statistics Monitoring Tool)是JDK提供的一个可以监控Java虚拟机各种运行状态信息的命令行工具.它 ...
- [动态规划] 适合DJ银行的日子
[动态规划] 适合DJ银行的日子 前言:开始的时候用常规模拟做的超时了,然后看官方题解,大致意思就是连续n天单调可以用动态规划的思想 你和一群强盗准备打劫银行.给你一个下标从 0 开始的整数数组 se ...
- ESP8266 NodeMCU引脚说明,CH340和CP2102两款
开发ESP8266 NodeMCU GPIO功能时,虽然知道ESP8266 NodeMCU丝印引脚编号如下图所示(CP2102款),但是和实际对应的GPIO编号完全不一样. CP2102款 引脚说 ...
- CF1504X Codeforces Round #712
CF1504D Flip the Cards(找规律+贪心) 题目大意:给你n张牌,正反面都有数字,保证所有牌上的数字在$[1,2n]$内且互不相同.你可以翻转任意张牌,接下来需要把牌按正面的数字从小 ...
- Redis的删除机制
Redis的删除机制 Redis的使用分两点: 性能如下图所示,我们在碰到需要执行耗时特别久,且结果不频繁变动的SQL,就特别适合将运行结果放入缓存.这样,后面的请求就去缓存中读取,使得请求能够迅速响 ...
- Spring如何处理线程并发问题?
在一般情况下,只有无状态的Bean才可以在多线程环境下共享,在Spring中,绝大部分Bean都可以声明为singleton作用域,因为Spring对一些Bean中非线程安全状态采用ThreadLoc ...
- cornerstone 忽略不必要文件
转:https://www.jianshu.com/p/f48207baa0cd