• ueditor单独调用图片上传


    很多人在问ueditor,如何单独使用图片上传功能,但是网上没有一篇能用的文档,没办法,我刚好也需要这个功能,花了3天时间(本人水平太菜,哎)终于知道怎么处理了,发出来给大家共享:

    效果如下:

    页面效果:


    点击上传图片:


    上传图片,点确定:


    获得上传图片的路径,并赋值给input


    Ok,效果就这样。

    具体实现也非常简单:

    JS代码:注意放在页面的最下面,页面需要加载ueditor必备的2js,放在页面的头部:

    ueditor/editor_all_min.js
    ueditor/editor_config_big.js
    
    var myEditorImage;
    var d;
    function upImage() {    
        d = myEditorImage.getDialog("insertimage");
        d.render();
        d.open();
    }
    
    myEditorImage= new UE.ui.Editor();
    myEditorImage.render('myEditorImage');
    myEditorImage.ready(function(){
    	myEditorImage.setDisabled();
    	myEditorImage.hide();//隐藏UE框体
    	myEditorImage.addListener('beforeInsertImage',function(t, arg){
    		alert(arg[0].src);//arg就是上传图片的返回值,是个数组,如果上传多张图片,请遍历该值。
    		//把图片地址赋值给页面input,我这里使用了jquery,可以根据自己的写法赋值,到这里就很简单了,会js的都会写了。
    		$("#abccc").attr("value", arg[0].src);
    	});
    });


    调用的页面:

    <tr>
    	<th>上传图片</th>
    	<td>
    		<input type="text" id="abccc" />
    		<input type="button" id="myEditorImagesss" onclick="upImage();" value="上传图片"/>
    	</td>
    </tr>

    Ok,搞定,非常简单。



  • 相关阅读:
    字符输入流 FileReader
    字符输出流 FileWriter
    字节流复制文件
    字节输入流 FileInputStream
    彻底弄懂jsonp原理及实现方法
    这三个月,我如何一点点地成长(海康前端实习)
    前端chrome浏览器调试总结
    前端常见的布局方案大全
    总结4种常用排序(快排、选择排序、冒泡排序、插入排序)
    详解JS中DOM 元素的 attribute 和 property 属性
  • 原文地址:https://www.cnblogs.com/moqiang02/p/4061324.html
Copyright © 2020-2023  润新知