jQuery在线上传头像图片裁剪插件

最新推荐文章于 2025-06-02 13:05:43 发布

amohan

最新推荐文章于 2025-06-02 13:05:43 发布

阅读量491

点赞数

CC 4.0 BY-SA版权

分类专栏：网站模版文章标签： jquery javascript 前端

原文链接：https://yy123.ink/frontDetail/11710

网站模版专栏收录该内容

3170 篇文章

订阅专栏

本文介绍了如何使用JavaScript库进行图片裁剪、旋转以及文件上传，包括使用Cropper插件、Base64编码和AJAX上传功能。适合前端开发者掌握前端图片处理和文件上传的最佳实践。

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

下载地址

$(document).ready(function(){ $("#up-img-touch").click(function(){ $("#doc-modal-1").modal({width:"600px"}); });});$(function() { "use strict"; // 初始化 var $image = $("#image"); $image.cropper({ aspectRatio: "1", autoCropArea:0.8, preview: ".up-pre-after", }); // 事件代理绑定事件 $(".docs-buttons").on("click", "[data-method]", function() { var $this = $(this); var data = $this.data(); var result = $image.cropper(data.method, data.option, data.secondOption); switch (data.method) { case "getCroppedCanvas": if (result) { // 显示 Modal $("#cropped-modal").modal().find(".am-modal-bd").html(result); $("#download").attr("href", result.toDataURL("image/jpeg")); } break; } }); // 上传图片 var $inputImage = $("#inputImage"); var URL = window.URL || window.webkitURL; var blobURL; if (URL) { $inputImage.change(function () { var files = this.files; var file; if (files && files.length) { file = files[0]; if (/^image/w+$/.test(file.type)) { blobURL = URL.ObjectURL(file); $image.one("built.cropper", function () { // Revoke when load complete URL.revokeObjectURL(blobURL); }).cropper("reset").cropper("replace", blobURL); $inputImage.val(""); } else { window.alert("Please choose an image file."); } } // Amazi UI 上传文件显示代码 var fileNames = ""; $.each(this.files, function() { fileNames += "" + this.name + " "; }); $("#file-list").html(fileNames); }); } else { $inputImage.prop("disabled", true).parent().addClass("disabled"); } //绑定上传事件 $("#up-btn-ok").on("click",function(){ var $modal = $("#my-modal-loading"); var $modal_alert = $("#my-alert"); var img_src=$image.attr("src"); if(img_src==""){ set_alert_info("没有选择上传的图片"); $modal_alert.modal(); return false; } $modal.modal(); var url=$(this).attr("url"); var canvas=$("#image").cropper("getCroppedCanvas"); var data=canvas.toDataURL(); //转成base64 $.ajax( { url:url, dataType:"json", type: "POST", data: {"image":data.toString()}, success: function(data, textStatus){ $modal.modal("close"); set_alert_info(data.result); $modal_alert.modal(); if(data.result=="ok"){ $("#up-img-touch img").attr("src",data.file); var img_name=data.file.split("/")[2]; console.log(img_name); $("#pic").text(img_name); } }, error: function(){ $modal.modal("close"); set_alert_info("上传文件失败了！"); $modal_alert.modal(); //console.log("Upload error"); } }); }); });function rotateimgright() {$("#image").cropper("rotate", 90);}function rotateimgleft() {$("#image").cropper("rotate", -90);}function set_alert_info(content){ $("#alert_content").html(content);}

dd: