精华内容
下载资源
问答
  • TinyMCE 官网 (类似:百度的富文本web编辑器UEditor)第一...第二步下载tinyMCE image upload 插件 tinymce-imageupload,解压后把该文件夹放在 tinymcejstinymceplugins目录下。该插件使用了jquery.iframe-post-form...

    TinyMCE 官网 (类似:百度的富文本web编辑器UEditor)

    第一步

    下载 TinyMCE,解压后放入工程,在需要的HTML页面引入tinymce.min.js。

    第二步

    下载tinyMCE image upload 插件 tinymce-imageupload,解压后把该文件夹放在 tinymcejstinymceplugins目录下。

    该插件使用了jquery.iframe-post-form.js ,在试用的时候没有成功,遂换成 jquery.form.js 对插件进行改造。

    第三步

    下载jquery.form.js,在HTML页面引入jquery和该插件。

    jquery.form.js 提供了基础的文件上传表单,可以用此插件上传本地图片到服务器。然后得到图片对应的URL。

    第四步:

    在HTML页面,初始化tinyMCE:

    tinymce.init({

    selector: '#myTextArea',

    theme: 'modern',

    menubar: false,

    width: 750,

    height: 250,

    autoresize_min_height: 350,

    imageupload_url: 'serverAddress/file/fileUpload', //图片上传地址

    plugins: [

    "advlist autolink print preview imageupload"

    ],

    toolbar: "insertfile undo redo | bold | print preview | imageupload",

    convert_urls: false,

    // init_instance_callback: setTinyContent

    });

    文件上传后的处理(tinymce\plugins\imageupload\plugin.min.js)

    服务器返回格式:

    {"error":false,"path":"http:\/\/www.mydomain.com\/myimage.jpg"}

    根据服务器的返回对应修改。大致流程:把服务器返回的路径置入标签中,插入到tinyMCE编辑器中,然后即可看到上传的图片。

    $('#uploadImageForm').ajaxSubmit({

    dataType: 'json',

    success: function(response){

    if (response.url) {

    var tpl = '%s';

    var tplV = tpl.replace('%s', response.url);

    tplV = tplV.replace('%k', response.key);

    ed.insertContent(tplV);

    ed.focus();

    removeForeground();

    removeBackground();

    } else {

    showImageUploadError('上传失败,请重试!');

    }

    },

    error: function(){

    showImageUploadError('上传失败,请重试!');

    }

    });

    改造后的插件 git地址

    注意点:

    点击上传图标后,弹出的上传图片窗口,由于tinyMCE内置CSS的问题导致弹窗缩放0.1倍,问题CSS:

    .mce-window {

    transform:scale(.1)

    }

    (come from skin.min.css)

    在使用的时候重写覆盖掉就可以了:

    .mce-window {

    transform: initial !important;

    }

    展开全文
  • 你有没有遇到过这种情况:需要给别人发一个图片,但不想加微信或QQ,用蓝牙又需要连接匹配太麻烦,有没有便捷的方式给别人发图片呢?通过Image Upload可以实现!

    你有没有遇到过这种情况:需要给别人发一个图片,但不想加微信或QQ,用蓝牙又需要连接匹配太麻烦,有没有便捷的方式给别人发图片呢?通过Image Upload可以实现!

    地址:参见文末图

    Image Upload的原理是将图片上传至服务器,生成一个网址,让他人在浏览器输入网址就可以查看图片或下载图片。因为网址比较短,输入方便,避免了加微信的尴尬。

    使用者打开Image Upload,点击paste an image,上传需要分享的图片,等待几秒后就会生成一个网址链接,如上图所示。

     在浏览器输入刚才生成的网址后如上图所示,显示了分享的图片,而且可以下载。需注意的是图片会上传服务器,所以使用时注意上传图片的隐私。

     

    展开全文
  • 使用tinymce作为网站的编辑器的时候,由于tinymce本身并不提供本地图片上传(提供付费图片上传插件),所以...1. 使用imageUpload插件tinymce拥有完备的插件体系,就像WordPress一样,tinymce本身就提供了一些核心插件...

    使用tinymce作为网站的编辑器的时候,由于tinymce本身并不提供本地图片上传(提供付费图片上传插件),所以我们需要自己去集成这个功能。但是我在网上找了很多资料,都没有完整且有效的实现方法,经过对已有插件的研究,最终实现了这个功能。现在记录下来,为今后参考。

    1. 使用imageUpload插件

    tinymce拥有完备的插件体系,就像WordPress一样,tinymce本身就提供了一些核心插件,例如字体样式等,虽然都是编辑器的核心功能,但是仍然是通过插件实现的。它不提供图片上传功能,它的图片只能引用网络图片。所以我们可以通过插件的形式来实现这个功能。

    imageUpload插件可以在这里获取和了解。按照作者的意图,在使用本插件的时候,必须先加载iframe form post插件,这个插件在这里下载。

    但是iframe form post插件的机制似乎出现了问题,导致我在使用时无法正常使用imageUpload插件,所以我选择了使用jquery.form.js这个插件。

    2.使用jquery.form.js插件

    jquery非常漂亮的封装了ajax,但是在进行表单提交的时候,特别是在上传图片的时候,就会出现问题,[type=file]无法被提交。而通过jquery.form.js插件,就可以很好的解决这个问题。

    jquery.form.js并没有提交为官方插件,你可以在这里下载下来。点击这里进入插件的官方主页。

    3.开始部署tinymce

    说了这么多,到底怎么来实现tinymce的本地上传图片功能呢?按照下方的方法一步一步的操作即可。

    1)集成tinymce

    也就是在你的HTML中先集成tinymce,并可以正常使用。具体集成方法就不说了。

    2)载入jQuery.form.js

    在进行tinymce的某个实例化之前,要载入jquery.form.js,你可以直接在tinymce的js载入之后,立即载入jquery.form.js。

    3)把插件丢入tinymce的插件目录

    上面说过了,我们对imageUpload插件进行了改造,点击这里下载我改造过的插件(jquery.form.js也在这里面)。下载之后,解压出imageupload目录,把这个目录直接丢在tinymce的插件目录(tinymce/plugins)下。

    4)初始化时配好配置

    在第一步中我们正常集成了tinymce,说明你已经知道如何进行配置了。接下来你要让你的上传图标出现在编辑器工具栏中,并且能够上传图片成功。

    tinymce.init({

    selector: "#detail",

    language : "zh_CN",

    language_url : "__ASSETS__/TinymceEditor/langs/zh_CN.js", // 语言包,需要到官网去下载,你也可以不使用中文语言包

    menubar: false,

    convert_urls: false,

    height: 450,

    plugins: [

    "link imageupload"

    ],

    toolbar: "undo redo | imageupload link | bold italic | alignleft aligncenter alignright alignjustify",

    imageupload_url: '{:U("File/uploadPicture")}'

    });

    要注意上面三个地方,一个是plugins中添加imageupload(初始化时载入插件),toolbar中要添加imageupload(工具栏中出现上传图片按钮),imageupload_url要设置文件上传到哪一个URL(用php去接收$_FILES['file']进行处理,比如上传、水印等)。

    imageupload_url用来处理上传好的图片,同时要返回一个json,让插件知道上传是否成功。json格式在imageUpload的github上已经有了,如果成功的情况下,要返回:

    {"error":false,"path":"http:\/\/www.mydomain.com\/myimage.jpg"}

    这样子,上传成功后,就可以直接将图片插入到该位置了。

    2015-11-19

    17244

    展开全文
  • ajax-image-upload

    2021-08-06 07:45:00
    ajaxImageUpload原创jQuery图片上传插件,支持批量上传、预览、删除、放大...上传前上传后使用方法1、先引入jquery和插件的css和js,注意先引入jquery2、HTML结构3、插件配置$(".upload-box1").ajaxImageUpload({fil...

    ajaxImageUpload

    原创jQuery图片上传插件,支持批量上传、预览、删除、放大、上传数量、上传大小、追加方式配置以及上传前、上传后和删除的回调函数。

    如果您觉得对您有用的话,别忘了给点个赞哦^_^ !

    上传前

    d78b9e7f73e4f863b30c3a5dfcb0a1b2.png

    上传后

    d82ae4859aad28689eb110729d6318a2.png

    使用方法

    1、先引入jquery和插件的css和js,注意先引入jquery

    2、HTML结构

    3、插件配置

    $(".upload-box1").ajaxImageUpload({

    fileInput: 'file1', //上传按钮名,即input[type=file]的name值

    postUrl: './upload1.php', //上传的服务器地址

    });

    $(".upload-box2").ajaxImageUpload({

    fileInput: 'file2', //上传按钮名,即input[type=file]的name值

    postUrl: './upload2.php', //上传的服务器地址

    });

    4、服务端处理

    服务端处理没有特殊的限制,只要服务端接受file表单提交的数据处理后返回json格式数据,上传成功返回的json数据里必须含有code和src,其中code必须为200,src是上传后的图片url,上传失败返回的json数据里必须含有code和msg,其中code为错误码(不能是200),msg为错误信息。

    以./upload1.php为例

    $file = $_FILES["file1"]; // 要和配置里的fileInput保持一致

    if(!isset($file['tmp_name']) || !$file['tmp_name']) {

    echo json_encode(['code' => 401, 'msg' => '没有文件上传']);

    return false;

    }

    if($file["error"] > 0) {

    echo json_encode(['code' => 402, 'msg' => $file["error"]]);

    return false;

    }

    $upload_path = dirname(__FILE__) . "/uploads/" . date('Ymd/');

    $file_path = "./uploads/" . date('Ymd/');

    if(!is_dir($upload_path) && !mkdir($upload_path, 0777, true)){

    echo json_encode(array('code' => 403, 'msg' => '上传目录创建失败,请确认是否有权限'));

    return false;

    };

    if(move_uploaded_file($file["tmp_name"], $upload_path.$file['name'])){

    echo json_encode(['code' => 200, 'src' => $file_path . $file['name']]);

    return true;

    }else{

    echo json_encode(['code' => 404, 'msg' => '上传失败']);

    return false;

    }

    参数说明

    配置项

    配置说明

    必选

    默认值

    fileInput

    上传按钮名,即input[type=file]的name值

    postUrl

    post请求地址

    width

    图片宽度

    150

    height

    图片高度

    150

    imageUrl

    已上传的图片连接

    []

    postData

    额外携带的json数据

    {}

    allowZoom

    是否允许放大

    true

    allowType

    允许上传图片的类型

    ["gif", "jpeg", "jpg", "bmp", "png"]

    maxNum

    允许上传图片数量

    3

    maxSize

    允许上传图片的最大尺寸,单位M

    2

    appendMethod

    图片追加方式,before/after

    before

    before

    上传前回调函数

    success

    单次上传成功回调函数

    complete

    全部上传成功回调函数

    delete

    删除图片回调函数

    error

    上传失败回调函数

    更新日志

    2021-07-05

    新增delete()回调函数,

    2020-04-30

    ajaxUrl参数改名为postUrl

    ajaxData参数改名为postData

    新增width参数,用于控制上传后显示图片的宽度

    新增height参数,用于控制上传后显示图片的高度

    2020-03-30

    解决图片名里含有多个.时图片格式验证失败的BUG

    鼠标放在上传图标上时新增pointer鼠标样式

    优化CSS样式,删除无用的样式

    优化complete()函数判断逻辑

    2020-03-28

    解决allowZoom设置为false时无法删除图片的BUG

    新增已上传图片配置参数imageUrl,该参数主要用于编辑时展示之前已经上传的图片

    新增追加方式配置参数appendMethod,可以指定上传图片在已有图片前面追加还是后面追加

    2020-03-25

    重写CSS样式,CSS类名前加ggy_前缀,以防止CSS污染

    解决同一个页面只能使用一次的BUG

    解决同一个文件二次上传无效的BUG

    解决上传图片验证失败后必须刷新页面才能重新上传的BUG

    新增批量上传功能

    新增批量上传成功回调函数complete,在所有图片上传成功后会触发

    Todo List

    批量上传

    图片放大

    去掉jquery依赖

    裁剪压缩

    拖拽排序

    展开全文
  • I have a REST Resource using JBoss &... RestEasy as follows@Path(ServiceURL.MEDIA)public class ImageUploadService {@POST@Consumes({APPLICATION_OCTET_STREAM})public Response upload(@QueryParam("conten...
  • The following PHP script creates a server-side upload handler suitable for TinyMCE.Note: This script is a reference requires updating to suit the application.Example postAcceptor.php/*****************...
  • Angular 2 - 图片上传,文件未上传到后端(未列出错误)(Angular 2 - Image upload , File not getting uploaded to backend (no error listed))我试图以角度2上传图像,我没有列出错误,但文件添加详细代码的位置没有...
  • 介绍vue-core-image-upload 是一款轻量级的 Vue.js 上传插件,它可以支持的图片的上传,裁剪,压缩。它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。Githubhttps://github....
  • el-upload action="#" list-type="picture-card" :auto-upload="false"> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}"> <el-image id="122" ref=
  • el-upload 组件的属性 <el-upload class="upload-demo" :disabled="isShow" :action="upload.url" :headers="upload.headers" :on-preview="handlePreview" :on-remove="handleRemove" :file-list=...
  • var file = document.getElementsByName('upload_file')[0].value; if (file == null || file == "") { alert("请选择要上传的文件!"); return false; } //定义允许上传的文件类型 var allow_ext = ".jpg|....
  • 若依管理后台多图片上传组件

    千次阅读 2021-04-19 10:24:10
    div class="component-upload-image"> <el-upload :action="uploadImgUrl" list-type="picture-card" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :on-er
  • npm install vue-image-crop-upload 使用 // html <myUpload v-model="show" @crop-success="cropSuccess" :width="imgLength" :height="imgLength" /> // script // data // 宽,高 imgLength: 120, ...
  • 我已经对axios进行了封装 export const upload = (params) => { const { url, payload } = params return axios.post(url, payload, { headers: { 'content-type': 'multipart/form-data' } }).then(x => x.data) }...
  • I’ve been trying to upload an image using firebase, React Native and react-native-image-picker.The data I get from the image picker is in base64 format and I don’t know how to actually upload it to ...
  • tinymce编辑器+layui

    2021-01-09 14:39:08
    t.render({ elem: "#edit", height: 600, //images_upload_url:"/自己的上传地址"//二进制 //重写上传方法(带进度条),不然传的二进制,以下返回的结果格式:{ location : "/demo/image/1.jpg" } images_upload_...
  • 注意prop要绑定 <el-form ref="form" :model="form" :rules="rules" label-width="150px"> <el-form-item label="文件:" style="width: 300px" prop="fileList">... class="upload-demo
  • vue-image-crop-upload裁剪工具使用踩坑

    千次阅读 2021-03-12 10:13:24
     用户需要进行上传头像,且能够对头像图片进行裁剪,引入vue-image-crop-upload裁剪工具,查看其源码后,增加处理业务问题的解决方法。 自定义上传  在该组件中,当点击保存按钮时才会触发其点击事件,也就是触发...
  • 2.去除el-upload动画, 3.支持传递最多可上传数量达到数量隐藏上传按钮 这是二次封装组件的子组件代码 pic为处理好后传递给父组件的base64代码 limit为接受父组件传递进来的图片最多上传张数,达到最多数量隐藏上传...
  • el-upload 上传到服务器,并返回图片链接http://localhost:9000/1.png <div class="upload-container"> <el-upload ... :multiple="false" :show-file-list="false" ... class="image-uploader" dr.
  • 新增服务,需要服务顶上传顶部宣传图,需求: 采用element 组件,限制上传数量1,支持预览,删除,数量为1时,隐藏...el-upload action="https://testopenapi.nbdeli.com/crm/customer/saveChannelLogoFile" :limit=
  • vue element-upload上传图片压缩——image-conversionimage-conversion 地址1. 安装模块2.引入imageConversion3.实现 image-conversion 地址 https://www.npmjs.com/package/image-conversion 1. 安装模块 npm i ...
  • --el-upload里面绑定一个占位class:设置隐藏--> <div class="hello"> <el-upload ref="pictureUpload" action="#" list-type="picture-card" :auto-upload="false" :class="{ hide: hideUpload ...
  • import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js'; import Indent from '@ckeditor/ckeditor5-indent/src/indent.js'; import IndentBlock from '@ckeditor/ckeditor5-indent/src/...
  • 发现vue-image-crop-upload这个vue的组件不错,而且github上的星星也蛮多,就打算用这个了。 前段时间试过一次,然而nuxt貌似不给面子,按照github上的方法引用vue-image-crop-upload组件,报错。Nuxt: Unexpected ...
  • 解决方案一:通过增加el-checkbox-group <el-form-item label="底图文件" prop="underlayFile"> <!-- 解决文件上传后校验信息还存在的问题 --> <el-checkbox-group v-show...upload-file ref="uploa.
  • Typora配置自定义图床图床配置upload-image.sh问题解答 图床配置 Typore 支持的图床: iPic uPic PicGo-core(命令模式) PicGo.app Custom Command 自己有图床服务,选择使用Custom Command的方式配置Typore 图片...
  • xhr.onerror = function () { failure( "Image upload failed due to a XHR Transport error. Code: " + xhr.status ); }; formData = new FormData(); formData.append("file", blobInfo.blob(), blobInfo....
  • 刚开始开发到这里的时候是打算随便网上找个开源的封装将就着用了,结果我的这个涉及到东西有点多无奈只好自己去封装一下了 ps:这个封装的上传组件涉及到的功能 1.提交按钮是在父组件提交的 ... name="Image
  • 简介vue-image-corp-upload适用于pc端用于头像,图标的正方形裁剪(也可以用于圆形显示),使用简单。插件效果如图。 一.取消默认上传主要参考blog地址 : ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 111,207
精华内容 44,482
关键字:

imageupload