在光标所在位置插入图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #box{
            width:500px;
            height:500px;
            border: 1px solid red;
        }
        #box img{
            width:100px;
        }
    </style>
</head>
<body>
    <div id='box' contentEditable="true"></div>
    <input type="file" name="pic[]" multiple id="myinput">
    <button onclick="upload()">上传</button>

</body>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>

    //获取光标
    (function($) {http://www.css88.com/archives/3627
    $.fn.insertContent = function(myValue, t) {
        var $t = $(this)[0];
        if (document.selection) { //ie
            this.focus();
            var sel = document.selection.createRange();
            sel.text = myValue;
            this.focus();
            sel.moveStart('character', -l);
            var wee = sel.text.length;
            if (arguments.length == 2) {
                var l = $t.value.length;
                sel.moveEnd("character", wee + t);
                t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);

                sel.select();
            }
        } else if ($t.selectionStart || $t.selectionStart == '0') {
            var startPos = $t.selectionStart;
            var endPos = $t.selectionEnd;
            var scrollTop = $t.scrollTop;
            $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
            this.focus();
            $t.selectionStart = startPos + myValue.length;
            $t.selectionEnd = startPos + myValue.length;
            $t.scrollTop = scrollTop;
            if (arguments.length == 2) {
                $t.setSelectionRange(startPos - t, $t.selectionEnd + t);
                this.focus();
            }
        }
        else {
            this.value += myValue;
            this.focus();
        }
    };
})(jQuery);

var input=document.getElementById('myinput');
var box=document.getElementById('box')
function upload () {

    var fd=new FormData()
    var files=input.files;

    for(var i=0;i<files.length;i++){
        fd.append('pic'+i,files[i])
        var fileobj=files[i];
        readImage(fileobj);
        console.log(fileobj)
    }

//上传文件，在localhost环境下
    $.ajax({
            url:'./server/upload.php',
            type:'post',
            data:fd,
            processData:false,
            contentType:false,
            success:function(res){
                alert('上传成功')
            },
            dataType:'json'
        })
}

//读取图片并将图片插在光标所在位置
function readImage(fileobj){
        var fr=new FileReader();
        fr.onload=function(){
            var img=document.createElement('img');
            img.src=fr.result;
            box.appendChild(img);
            console.log(img)
            $('#box').insertContent(img)
        }
        fr.readAsDataURL(fileobj);
    }


</script>

</html>
在光标所在位置插入图片

推荐阅读更多精彩内容
