jq upload图片上传代码

最新推荐文章于 2024-08-21 08:34:53 发布

Mathilda91

最新推荐文章于 2024-08-21 08:34:53 发布

阅读量189

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：http://www.cnblogs.com/lk1186578324/p/7562378.html

本文介绍了一个使用Ajax进行图片上传的功能实现方法，详细展示了如何验证图片格式，并通过预览功能展示已上传图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
* 图片上传
* */
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();
}

转载于:https://www.cnblogs.com/lk1186578324/p/7562378.html