<!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>
网友评论