七牛、JQery JCrop、Ueditor结合

简介: 七牛、JQery JCrop、Ueditor结合
  1. 七牛
  1. http://developer.qiniu.com/
  1. ueditor和七牛结合
  1. http://www.sxt.cn/info-4774-u-756.html(参考地址)
  2. http://www.w3cfuns.com/article-1310-2.html
  1. Jquery Jcrop
  1. 杠杠 jsp/ImageCrop.jsp
  2. http://www.jb51.net/article/18273.htm(参考地址)
  3. 代码 <html>
       <head>
           <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script>
           <script src="http://img.jb51.net/jslib/jquery/jquery.jcrop.min.js"></script>
    <style type="text/css">
           body{
               margin:100px auto;
               text-align:center;
           }
           .jcrop-holder {
               text-align: left;
           }
           .jcrop-vline, .jcrop-hline{
               font-size: 0;
               position: absolute;
               background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') top left repeat;
           }
           .jcrop-vline {
               height: 100%;
               width: 1px !important;
           }
           .jcrop-hline {
               width: 100%;
               height: 1px !important;
           }
           .jcrop-handle {
               font-size: 1px;
               width: 7px !important;
               height: 7px !important;
               border: 1px #eee solid;
               background-color: #333;
               *width: 9px;
               *height: 9px;
           }
           
           .jcrop-tracker {
               width: 100%;
               height: 100%;
           }
           
           .custom .jcrop-vline,.custom .jcrop-hline{
               background: yellow;
           }
           .custom .jcrop-handle{
               border-color: black;
               background-color: #C7BB00;
               -moz-border-radius: 3px;
               -webkit-border-radius: 3px;
           }
           </style>
           <script language="Javascript">
           jQuery(function(){
               jQuery('#cropbox').Jcrop();
           });
           </script>
       </head>
       <body>
               <img src="http://img.jb51.net/jslib/images/flowers.jpg" id="cropbox" />

    <a href="http://www.jb51.net/">脚本之家</a>
       </body>
    </html>
目录
相关文章
|
域名解析 应用服务中间件 网络安全
|
10月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
552 2
|
对象存储
从零玩转文件上传之七牛云1
从零玩转文件上传之七牛云
166 0
|
缓存 网络安全 对象存储
从零玩转文件上传之七牛云2
从零玩转文件上传之七牛云
99 0
|
前端开发 JavaScript
前端上传图片到七牛云
前端上传图片到七牛云
376 0
|
前端开发
ueditor 百度富文本编辑器后端配置(上传图片)
ueditor 百度富文本编辑器后端配置(上传图片)
580 0
|
存储 安全 对象存储
用Typora,PicGo和OSS实现自动上传图片
以前写博客要发布到好些个平台,我是将图片一张张上传到每个平台,后来发现是真的麻烦,上传图片花的时间太多,极大的降低了我写文章的积极性。后来改进为使用oss,把博客的图片都上传到oss上面。然后使用oss返回的图片url,这样我的文章里面的图片只上传了一次,最后把整篇文章的mardown复制到各个平台上,平台一般都会把markdown的文章中的img标签的图片上传到他们自己的服务器,然后把图片打上平台的水印,然后把原图片链接替换掉。
792 1
用Typora,PicGo和OSS实现自动上传图片
|
存储 编译器 对象存储
Typora+PicGo+阿里云OSS搭建博客图床
Typora+PicGo+阿里云OSS搭建博客图床
393 0
|
Android开发
autojs七牛云上传文件
牙叔教程 简单易懂
368 0
|
存储 缓存 安全
基于GitHub/七牛云 + PicGo 搭建属于Typora的图床
基于GitHub/七牛云 + PicGo 搭建属于Typora的图床
723 0
基于GitHub/七牛云 + PicGo 搭建属于Typora的图床

热门文章

最新文章