jq upload图片上传代码
Posted 码我滴码
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq upload图片上传代码相关的知识,希望对你有一定的参考价值。
/*
* 图片上传
* */
function postImgData() {
$("#addFileInfo input[name=‘file‘]").change(function () {
console.log($(this).val())
if (!$(this).val()) {
return
}
var fileTyle = $(this).val().split(".");
console.log(fileTyle);
if (fileTyle[1] !== "png" && fileTyle[1] !== "jpg" && fileTyle[1] !== "jpeg" && fileTyle[1] !== "PNG" &&
fileTyle[1] !== "JPG" && fileTyle[1] !== "JPEG"
) {
alert("只允许上传‘png(PNG)‘、‘jpg(JPG)‘、‘jpeg(JPEG)‘格式的图片");
return;
} else {
console.log(123);
$("#addFileInfo").ajaxSubmit({
type: ‘post‘,
url: ‘/uploadFilePath‘,
success: function (data) {
console.log(data);
$(".webuploader-pick i").hide();
$(".webuploader-pick img").hide();
if (data.status == 0) {
alert("请上传头像");
return;
}
// console.log(typeof data);
// var urls = JSON.parse(data.filepath);
// console.log(urls);
// var fontUrl = urls.filepath.url;
if(typeof data===‘string‘){
var urls = JSON.parse(data);
}else {
var urls = data;
}
var fontUrl = urls.filepath.url;
console.log(fontUrl);
$("#avatar").val(fontUrl);
$("#crop_preview").attr("src", tools.baseImgUrl() + fontUrl).fadeIn(500);
$(".head_msg").fadeOut(500);
$("#preview_box .iconfont").fadeOut(500);
var i = 0;
$("#crop_preview").load(function () {
if (i > 0) {
jcrop_api.destroy();
}
i++;
var w = $("#crop_preview").width(), h = $("#crop_preview").height();
$("#crop_preview").removeAttr("style")
if (w >= 180 || h >= 150) {
if (w > h) {
$("#crop_preview").css("width", "180px");
h = $("#crop_preview").height();
w = 180;
} else {
$("#crop_preview").css("height", "150px");
w = $("#crop_preview").width();
h = 150;
}
}
});
$(".pic_cont h2").hide();
var imgUrl = fontUrl;
console.log(imgUrl)
customers(imgUrl)
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
//为测试原生ie9
}
});
}
})
customers();
}
以上是关于jq upload图片上传代码的主要内容,如果未能解决你的问题,请参考以下文章
el-upload配合vue-cropper实现上传图片前裁剪