# Hsiao-CropUpload

**Repository Path**: sloder/Hsiao-CropUpload

## Basic Information

- **Project Name**: Hsiao-CropUpload
- **Description**: 捆绑了jCrop裁剪插件的jQuery Ajax上传插件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-06-10
- **Last Updated**: 2025-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#Hsiao-CropUpload
Hsiao-CropUpload是一个扩展了著名jQuery图片裁剪插件Jcrop的Ajax上传插件，针对需要在上传图片前先预览或裁剪的场景，比如：上传头像

**感谢Jcrop提供扩展包**  
如果你只想用Jcrop的话，github地址：[https://github.com/tapmodo/Jcrop/](https://github.com/tapmodo/Jcrop/)

**压缩方式**  
CropUpload压缩版采用Google的Closure-Compiler压缩，github传送门：[https://github.com/google/closure-compiler](https://github.com/google/closure-compiler)，使用方法自行Google

###Last Version
**1.4.1**
1. 修复批量上传时出现无法回调上传进度的BUG

###sample
html:
```
<div class="upload"></div>
```

Javascript:
```
$('.upload').cropupload({
    url : 'upload.php',
    autoload : true,	//如果preview = true，autoload设置无效
    preview : true,
    progress : function(process){
        console.log("上传进度："+process);
    },
    success : function(res){
        console.log("上传成功");
    },
    crop : {
        /* 这部分参数参照Jcrop官方文档 */
        options : {
            aspectRatio: 1,		//选框宽高比。说明：width/height
            allowMove:true,		//允许选框移动
            allowResize:true,	//允许选框缩放
            minSize:[50,50],	//选框最小尺寸
            setSelect: [0,0,100,100]	//设置预选框
        },
        callback : function(e,s,c){
            console.log('选框X轴坐标:'+c.x);
            console.log('选框Y轴坐标:'+c.y);
        }
    }
});
```

###参数说明

> url : '',	//上传地址  
> crop : {},	//裁剪功能参数  
> prefix : 'cp_',		//前缀  
> selectText : '选择文件',	//选择文件按钮文字  
> inputName : 'files',	//上传空间name  
> data : {},		//预置POST参数  
> fileType : '',		//限制文件类型，空为不限制，支持jpg,gif,png,jpeg,bmp  
> fileSize : '2048',		//限制文件大小，单位字节(默认2M)  
> multiple : false,	//支持文件多选，支持多选后不支持预览和裁剪  
> preview : false,	//预览功能开启状态，开启后手动上传  
> autoupload : false,		//自动上传开启状态，关闭预览的情况下有效  
> success : function(){},		//上传成功后的回调方法  
> progress : function(){},	//进度值回传方法  
> fileUrl : function(){},		//文件地址获取方法  
> beforeUpload : function(){},		//开始上传前的方法，在上传前执行  
> onSelect : function(){}		//选择文件后触发事件,推送已选择文件信息  

###事件

**setData**

用于后期增加上传文件时同步提交POST数据（建议放在beforeUpload方法里）
用法：
```
$('.upload').trigger('setData',{data:'data1',data2:'data3'});
```

**startUpload**
手动执行上传操作，取消生成上传按钮
用法：
```
$('.upload').trigger('startUpload');
```