前端上传图片组件,基于HTML,支持Flash向下兼容

image-crop-upload

前端上传图片组件,基于HTML,支持Flash向下兼容,支持上传前根据设定的指定尺寸比例手动裁剪,并且支持本地预览,上传图片支持各种事件回调。

Demo

此Demo只是演示了在线裁剪,没有加服务器上传,使用的时候只要正确配置uploadurl就可以了。

声明

首先注明,本项目是基于Jcrop和FileAPI,前者是提供了图片拖动选择裁剪的JS组件,后者则是图片处理和上传的组件,本项目是融合两个开源项目发展而成。简化了一些步骤并优化了使用体验。没有他们就没有本项目,感谢Jcrop和FileAPI!

Jcrop

Jcrop (official) - Image Cropping Plugin for jQuery http://deepliquid.com/content/Jcrop.html

FileAPI

FileAPI — a set of javascript tools for working with files. Multiupload, drag'n'drop and chunked file upload. Images: crop, resize and auto orientation by EXIF. http://mailru.github.io/FileAPI/

特别说明

本项目会定期更新引用的Jcrop和FileAPI版本。并且引用为完整引用,不会对引用的第三方组件进行代码修改再分发。关于引用组件的更新变化请关注它们的主页。

如何使用 引用FileAPI和Jcrop

<script type="text/javascript" src="../dependent/fileapi/FileAPI.min.js"></script> <script type="text/javascript" src="../dependent/jcrop/jquery.Jcrop.min.js"></script> <link rel="stylesheet" href="../dependent/jcrop/jquery.Jcrop.min.css" /> 引用ImageCropUpload

<script type="text/javascript" src="../dist/Jquery.ImageCropUpload.min.js"></script> 使用例子

<!--使用1:file控件--> <input type="file" id="fileapi" name="fileapi"/> <!--使用2:普通标签--> <div id="fileapi"/> <script> $("#fileapi").ImageCropUpload({ imagewidth:300, imageheight:300, cropcomplete:function(img){ $("#images").append(img); } }); </script> 全部配置说明

参数 类型 说明
uploadurl String 上传服务器URL地址
cropenable       是否开启在线剪裁(如果没有配置宽高,即使开了也没用)
imagewidth String 图片合适宽度,过大将会启用裁剪,优先级小于目标节点的data-width
imageheight String 图片合适高度,过大将会启用裁剪,优先级小于目标节点的data-height
customver All 自定义参数,可以是任何值。回调函数处理
uploadcheck       Function(option) 上传开始的检查工作,可以通过返回false中止上传流程
cropcomplete Function(image,option) 裁剪完成执行的回调函数
uploadbefore Function(option) 开始上传之前执行的回调函数
uploadprogress Function(pr,option) 上传过程中执行的回调函数(执行多次)
uploadsuccess Function(result, options) 上传完成执行的回调函数

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。