这是常见的ajax ⬇️ 前后端交互
var datalist = {
name: name, //名称
app_type:app_type, //app名
size_list: size, //尺寸
price: price, //价格
click_rate: click_rate, //点击率
pkg_name: pkg_name, //包名
download_links: download_links, //下载链接
edition: edition, //版本
download: download, //是否下载
image: reader.result //图片base64 , base64可以这样直接放在对象中发送
}
$.ajax({
type:"post",
url:baseUrl + "/cp/",
data:datalist,
xhrFields: {
withCredentials: true //支持附带详细信息
},
success:function(res) {
var str = ""
console.log(res);
if (res.code !== 0) {
alert(res.msg)
} else {
//成功
}
}
});
这个是可以上传base64字符串的 , 相对简单不用任何解析
弊端就是不利于数据库的存储 因为base64 长度过长
html 文件 ⬇️
<div class="row">
<label class="form-label">缩略图:</label>
<div id="img">
<input type="file" id="file">
<button id="btn" onclick="uploadImg()">上传图片</button>
<img alt="" id="img1" style="margin:10px 0 0 0; clear:both;"/>
</div>
</div>
js 文件 ⬇️
$("#file").change(function(){
var reader = new FileReader();
var AllowImgFileSize = 2000000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败
var file = $("#file")[0].files[0];
var imgUrlBase64;
if (file) {
//将文件以Data URL形式读入页面
imgUrlBase64 = reader.readAsDataURL(file);
console.log(imgUrlBase64);
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;
//截取base64码部分(可选可不选,需要与后台沟通)
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上传失败,请上传不大于2M的图片!');
return;
}else{
//执行上传操作
console.log(reader.result); //这个就是图片转的base64
$("#img").attr("src",reader.result) //他可以直接显示在img的src中
var file = dataURLtoBlob(reader.result); //Blob对象存放二进制数据,这一步可以不写了
console.log(file) //返回的十一个 blob对象
//当然, 如果后端可以解析Blob对象形式, 也是可以用到的
}
}
}
})
// 这个是网上找的封装的将base64 转成 二进制流 ⬇️
// 结果是一个对象
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
解释一下Blob对象的用途和理解
var data='<b style="font-size:32px;color:red;">次碳酸钴</b>';
var blob=new Blob([data],{"type":"text/html"});
onload=function(){
var iframe=document.createElement("iframe");
iframe.src=URL.createObjectURL(blob);
document.body.appendChild(iframe);
};
//HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型,这相当于对文件的储存,其它很多二进制对象也是从这个对象继承的。
//不仅是上面例子中的text/html,任何浏览器支持的类型都可以这么用。
//而且这个Blob-URL的生存周期是从创建到文档释放,不会造成资源的浪费。
//Blob是一个HTML5中很基本的二进制数据对象,很多方法的操作参数都支持使用Blob。
//总之,几乎所有参数类型是二进制数据的方法都支持使用Blob作为参数就对了。
//所以把数据做成Blob可以让之后的一些列操作变得更方便。
爬坑
formdata对象不能被再次封装 , 其他文章都不曾提示
有其他数据都可以用append方法扔进formdata对象中 , 然后传给后端 !!!
之后后端在解析 formdata 对象就可以获取到所有的值了!!!
var idJustoFiles = document.getElementById("img-idJust").files;
var idBackoFiles = document.getElementById("img-idBack").files;
var params = new FormData();
params.append('idJust', idJustoFiles[0]);
params.append('idBack', idBackoFiles[0]);
params.append('nickName', nickName);
params.append('phone', phone);
params.append('QQ', QQ);
params.append('tel', tel);
$.ajax({
type: 'post',
url: baseUrl + "/cp/add_personal_data/",
data: params, //对象
contentType: false,
processData: false,
xhrFields: {
withCredentials: true //允许浏览器发送验证的凭证
},
success: function (data) {
console.log(data)
if (data.code !== 0) {
alert(data.msg)
} else {
alert("添加成功 , 页面将会跳转到首页")
// window.location.href = "./home.html"
}
}
})
这就是上传图片的几种方式, 大家随机应变
对了, 还有一种用form表单默认提交的方式可以上传图片, 不同的是这种方式不用ajax
有兴趣的可以去了解一下
压缩图片的方法
function dealImage(re,bili,callback){
var newImage=new Image();
var quality=0.7;
newImage.src=re;
newImage.setAttribute("crossOrigin",'Anonymous')
var imgWidth,imgHeight;
newImage.onload=function(){
var _canvas=document.createElement("canvas");
var ctx=_canvas.getContext("2d");
var _canvas = document.createElement("canvas");
var w = this.width / bili;
var h = this.height / bili;
_canvas.setAttribute("width", w);
_canvas.setAttribute("height", h);
_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
ctx.clearRect(0,0,_canvas.width,_canvas.height);
ctx.drawImage(this,0,0,_canvas.width,_canvas.height);
var base64=_canvas.toDataURL("image/jpeg",quality);
callback(base64);//必须通过毁掉函数返回,否则无法及时拿到改值
}
}
//使用时 第二个参数压缩了四分之一
dealImage(data,4,next);
function next(base64){
//这里写一些业务逻辑,同时把base64赋值给后台接口
console.log(base64)
}