{"id":17968632,"url":"https://github.com/lijinke666/upload","last_synced_at":"2025-03-25T10:32:26.196Z","repository":{"id":74016933,"uuid":"66131387","full_name":"lijinke666/upload","owner":"lijinke666","description":":scissors: 一个简单的 Jquery ( 图片裁剪上传 | 文件上传 ) 插件,支持图片拖拽粘贴","archived":false,"fork":false,"pushed_at":"2020-07-01T16:03:58.000Z","size":667,"stargazers_count":34,"open_issues_count":3,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-20T01:06:26.995Z","etag":null,"topics":["clip","css","drag","drag-and-drop","draping","html5","jquery","plugin","progress","upload"],"latest_commit_sha":null,"homepage":"https://lijinke666.github.io/upload","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lijinke666.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-20T06:06:44.000Z","updated_at":"2025-01-15T09:07:34.000Z","dependencies_parsed_at":"2023-09-24T01:50:09.238Z","dependency_job_id":null,"html_url":"https://github.com/lijinke666/upload","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Fupload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Fupload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Fupload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lijinke666%2Fupload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lijinke666","download_url":"https://codeload.github.com/lijinke666/upload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245444309,"owners_count":20616356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clip","css","drag","drag-and-drop","draping","html5","jquery","plugin","progress","upload"],"created_at":"2024-10-29T14:41:03.292Z","updated_at":"2025-03-25T10:32:26.187Z","avatar_url":"https://github.com/lijinke666.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":" # upload\n jQuery（文件上传|图片裁剪上传）渣渣插件 ,支持拖拽,粘贴上传,上传进度\n\n[在线DEMO](https://lijinke666.github.io/upload/)\n\n## API\n```js\n var upload = new Upload(root);\n \n //图片裁剪上传\n upload.clipUpload(options)\n\n //文件上传\n upload.fileUpload(options)\n\n//显示加载提示\nupload.loading(msg)\n\n//移除加载提示\nupload.removeLoading()   \n\n //消息提示\n upload.notice()\n \n//预览图片\n upload.showImage()\n```\n\n## 本地开发\n```\ngit clone https://github.com/lijinke666/upload.git\nnpm install\nnpm start\n```\n\n## 预览 \n\n![example](https://github.com/lijinke666/upLoad/blob/master/example.gif)\n\n\n## 如何使用 ?\n\n```javascript\n\u003clink rel=\"stylesheet\" href=\"../libs/upload.min.css\"\u003e\n\u003cbody\u003e\n\u003cdiv class=\"headImg-popup\"\u003e\n    ...\n\u003c/div\u003e\n\u003c/body\u003e\n\u003cscript src=\"../libs/upload.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n        var upload = new Upload($(\".headImg-popup\"));\n\n        upload.clipUpload({\n            ...\n        })\n\u003c/script\u003e\n```\n\n## 示例\n\u003e (例子 1)  `clipUpload()`  图片裁剪上传   请参考 `examples/clip_upload_example.html`\n\n\u003e 在线预览 : [https://lijinke666.github.io/upload/examples/clip_upload_example.html](https://lijinke666.github.io/upload/examples/clip_upload_example.html)\n\n```javascript\n    var upload = new Upload($(rootElement);\n    upload.clipUpload({\n        fileBtn:param,                          //file 文件按钮   [type] Object  必选\n        fileSelectBtn:param,                    //美化后的选择按钮  [type] Object  非必选\n        uploadBtn:param,                        //文件上传按钮    [type] Object  必选\n        showEle:param,                          //图片移动区域     [type] Object  必选\n        quality:param                           //图片压缩  0-1   [type] Number [default] 0.92  非必选 不填格式为png 选了格式为jpg\n        maxSize:param                           //文件大小限制   [type] Number [default] 1024kb  [unit] KB 非必选\n        range:param,                            //滑块   [type] Object 非必选\n        zoom:param,                             //鼠标是否可以控制图片缩放  [type] Boolean [default] true 非必选\n        paste:param,                            //是否可以图片粘贴到裁剪区域 [type] Boolean ][default] true 非必选\n        drag:param,                             //是否可以将图片拖入裁剪区域  [type] Boolean [default] true  非必选        \n        dragArea:param,                         //拖拽的区域  [type] Object  如果不需要 这个参数可不传 drag 传 false drag 为 false时 非必选\n        dragAreaActiveClassName:param,          //自定义拖拽区域className [type] String [default] 'dragActive'\n        success:function( image ){              //裁剪成功callback  返回base64图片 [type] Function  非必选\n            //do something ...\n        },\n        error:function(e){                      //裁剪失败callback  返回错误信息     clip error callback return error message  [type] Function   非必选\n            console.error(e)\n        }    \n    })\n    \n```\n\n\n\u003e (例子 2)  `fileUpload()`  文件上传（带进度条功能）  请参考 `examples/file_upload_example.html`\n\n\u003e 在线预览 : [https://lijinke666.github.io/upload/examples/file_upload_example.html](https://lijinke666.github.io/upload/examples/file_upload_example.html)\n\n```javascript\n     var upload = new Upload($(rootElement);\n     upload.fileUpload({\n         url:fetchUrl,                                       //后端接口地址  The back-end interface address  [type] String  is required\n         form:param,                                         //表单   form  [type] Object is required\n         fileBtn:param,                                      //文件file按钮   your file btn [type] Object is required\n         fileSelectBtn:param,                                //美化后的file选择按钮 可不选    To replace the native button  (Not a choice)\n         fileUploadBtn:param,                                //文件上传按钮   file upload button [type] object is required\n         drag:param,                                 //支持拖拽      file is drag 默认true [type] boolean [default] true    \n         dragArea:$('.drag-section') ,                //响应拖拽的区域    file dragArea [type] Object \n         onChange:function(result){                          //文件选择事件  返回一个对象，分别是文件的 size,type,name,流  [type] Function\n              //这里可以拿到数据，显示在页面上                 return file (size | type | name)\n\n         },\n         progress:function(progress){                        //文件上传进度事件  返回文件的       //上传进度\n              //这里可以拿到进度，显示在页面上                  return file upload pregress\n         },\n         success:function(result){                           //上传成功回调    返回后端传过来的response\n             //do something ....                             upload success callback return response\n         },\n         error:function(e){                                  //上传失败回调    返回错误信息\n            console.log('error',e)                            //upload error callback return error message\n         }\n     })\n     \n```\n\n##### 默认函数内部消息提示 使用 `notice()` 如果你需要自定义 可以在实例化的时候配置\n\u003e 以 `layer` 弹窗库 为例\n```javascript\n    var upload = new Upload($(\".root\"),{\n        notice:layer.msg,\n    });\n```\n\n## License\n[MIT](https://github.com/lijinke666/upload/blob/master/LICENCE)\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flijinke666%2Fupload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flijinke666%2Fupload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flijinke666%2Fupload/lists"}