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时,可以看到一个欢迎页面,页面上有一个文件上传的表单. 用户可以选择一个图片并提交表单,随后文件将被上 ...
随机推荐
- SpringCloudConfig配置使用
目录 SpringCloudConfig 是什么 作用 1.创建Git仓库 2.创建配置中心服务端 创建项目 导入pom 开启@EnableConfigServer YML 测试 全部资源请求方式 3 ...
- think php jq ajax删除
表单展示页面 <!doctype html> <html lang="en"> <head> <meta charset="UT ...
- Java基础:ThreadLocal及其原理
ThreadLocal的用处 ThreadLocal是一个多线程的辅助工具类,目的是方便开发者维护多线程中的共享变量.我们知道如果我们想要在一个线程中一直访问一个变量或者在线程上下文中保存一个变量,我 ...
- springWeb——Servlet
6.1.Servlet简介 servlet是sun公司开发动态web的一门技术 sum在这些API中提供了一个接口叫做:Servlet.开发的两个步骤: 编写一个类,实现Servlet接口 把开发好的 ...
- java项目中日志的配置
1.日志相关比较详细的介绍:https://www.cnblogs.com/tanshaoxiaoji/p/log4j_config.html 2.总结1中博客说的内容 目前市场上常用的日志有log4 ...
- XSS 32个触发事件
标签: 1.onmouseenter:当鼠标进入选区执行代码 <div style="background-color:red" onmouseenter="ale ...
- 安装配置Snort和barnyard2
1.安装依赖包 yum install –y gcc flex bison zlib* libpcap* tcpdump gcc-c++ zlib* libdnet libdnet-devel pcr ...
- 常见的url编码
URL编码值 字符 %20 空格 %22 " %23 # %25 % %26 &; %28 ( %29 ) %2B + %2C , %2F / %3A : %3B ; %3C < ...
- 寻路算法之A*算法详解
前言 在实际开发中我们会经常用到寻路算法,例如MMOARPG游戏魔兽中,里面的人物行走为了模仿真实人物行走的体验,会选择最近路线达到目的地,期间会避开高山或者湖水,绕过箱子或者树林,直到走到你所选定的 ...
- centos配置ssh服务并简单测试
最近在做计算机集群方面的东西,简单弄了一下ssh服务. 首先把前提情况介绍一下: 1.我是用的虚拟机先模拟的,也不是没有真机,就是跑来跑去麻烦. 2.装了三个相同配置的centos虚拟机,详细参数就不 ...