2021-08-11

最新推荐文章于 2024-10-03 22:12:17 发布

weixin_41166094

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量55

点赞数

分类专栏：前端文章标签： js html jquery css 前端

本文链接：https://blog.csdn.net/weixin_41166094/article/details/119604135

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了一个利用cropper.js库进行图片剪切并上传到服务器的实现过程。首先引入query-1.10.2.js、cropper.min.css和cropper.min.js，然后展示HTML代码，包括图片上传、裁剪区域和操作按钮。接着，通过JS处理图片裁剪和操作功能。最后，展示了C#后台保存图片的代码，检查文件大小并保存到指定路径。

摘要由CSDN通过智能技术生成

cropper.js、图片剪切，上传保存
1、引用
query-1.10.2.js
cropper.min.css
cropper.min.js
2、HTML

更换图片

<!--图片裁剪框 start-->
<div style="display: none" class="tailoring-container">
    <div class="black-cloth" onclick="closeTailor(this)"></div>
    <div class="tailoring-content">
        <div class="tailoring-content-one">
            <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                选择图片
            </label>
            <div class="close-tailoring" onclick="closeTailor(this)">×</div>
        </div>
        <div class="tailoring-content-two">
            <div class="tailoring-box-parcel">
                <img id="tailoringImg" src="~/images/snow.jpg" />
            </div>
            <div class="preview-box-parcel">
                <p>图片预览：</p>
                <div class="square previewImg"></div>
                <div class="circular previewImg"></div>
            </div>
        </div>
        <div class="tailoring-content-three">
            <button class="l-btn cropper-reset-btn">复位</button>
            <button class="l-btn cropper-rotate-btn">旋转</button>
            <button class="l-btn cropper-scaleX-btn">换向</button>
            <button class="l-btn sureCut" id="sureCut">确定</button>
        </div>
    </div>
</div>

3、js

4、c#
///
/// 保存图片
///
///
public JsonResult SaveFileInfor()
{
try
{
var files = HttpContext.Request.Files;
DateTime SubmitDate = DateTime.Now;
string path = “”;
string guidpath = “”;
var savePath = “~/UploadFiles/QCX/”;
for (int i = 0; i < files.Count; i++)
{
HttpPostedFileBase file = files[i];
string File_Name = file == null ? “” : file.FileName;
if (!string.IsNullOrEmpty(File_Name))
{
if (file.ContentLength > 2097152)//限制2M大小
{
return Json(new { state = -1, msg = “限制2M以内！”, Url = “” });
}
string FileType = File_Name.Substring(File_Name.LastIndexOf(".") + 1); //得到文件的后缀名
if (FileType == “undefined”)
{
FileType = “jpg”;
}
guidpath = SubmitDate.ToString(“yyyyMMddHHmmss”) + “.” + FileType; //得到重命名的文件名

                    string filepath = (savePath.IndexOf("~") > -1) ? System.Web.HttpContext.Current.Server.MapPath(savePath) : savePath;
                    if (!Directory.Exists(filepath))//判断文件夹是否存在 
                    {
                        Directory.CreateDirectory(filepath);//不存在则创建文件夹 
                    }
                    path = filepath + guidpath;
                    file.SaveAs(path); //保存操作
                }
                else
                {
                    return Json(new { state = 0, msg = "服务器故障！", Url = "" });
                }
            }
            return Json(new { state = 1, msg = "成功！", Url = "/UploadFiles/QCX/" + guidpath });
        }
        catch (Exception ex)
        {
            return Json(new { state = 0, msg = ex.ToString(), Url = "" });
        }
    }

5、展示
选择图片弹出窗口