粘贴截图完成上传功能
2017-08-28 17:41
246 查看
<?php header("Access-Control-Allow-Origin:*"); $url = 'http://'.$_SERVER['HTTP_HOST']; $file = (isset($_POST["file"])) ? $_POST["file"] : ''; if($file) { $data = base64_decode(str_replace('data:image/png;base64,', '', $file)); //截图得到的只能是png格式图片,所以只要处理png就行了 $name = md5(time()) . '.png'; // 这里把文件名做了md5处理 file_put_contents($name, $data); echo "$url/$name"; die; } ?> <div id="box" style="width:400px;height:400px;border:1px solid;" contenteditable> </div> <input type="hidden" name="img" value="" id="img_puth"/> <script> //查找box元素,检测当粘贴时候, document.querySelector('#box').addEventListener('paste', function(e) { //判断是否是粘贴图片 if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) { var that = this, reader = new FileReader(); file = e.clipboardData.items[0].getAsFile(); //ajax上传图片 reader.onload = function(e) { var xhr = new XMLHttpRequest(), fd = new FormData(); xhr.open('POST', '', true); xhr.onload = function () { var img = new Image(); img.src = xhr.responseText; // that.innerHTML = '<img src="'+img.src+'" alt=""/>'; document.getElementById("img_puth").value = img.src; } // this.result得到图片的base64 (可以用作即时显示) fd.append('file', this.result); that.innerHTML = '<img src="'+this.result+'" alt=""/>'; xhr.send(fd); } reader.readAsDataURL(file); } }, false); </script>转自 https://www.oschina.net/code/snippet_933356_47893
相关文章推荐
- php实现粘贴截图并完成上传功能
- php实现粘贴截图并完成上传功能
- [转]php实现粘贴截图并完成上传功能
- kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器
- kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器
- 测试一下google doc直接上传截图 粘贴过来的效果
- 使用php完成常见的"文件上传"功能
- 使用php完成常见的文件上传功能(推荐)
- 牛腩购物32:完成整个网站的功能制作(后台产品列表,多表查询+分页),产品修改保存,图片的上传保存
- 截图后粘贴或拖拽上传
- 利用Jcrop完成截图保存功能
- 实现QQ截图粘贴到聊天框功能
- 让input支持 ctrl v上传粘贴图片? 让input支持QQ截图或剪切板中的图像数据(Java实现保存)
- [操作系统][图]Windows 8 复制粘贴功能截图出现 可暂停复制
- java完成文件上传功能
- struts2结合uploadify-v3.1完成批量图片上传功能
- 一行代码完成 调用系统相册 和 视频,语音库,选择图片,视频,和音频文件。在选择界面实现了录制视频和录制音频功能。 截图
- javascript实现粘贴qq截图功能(clipboardData)
- JAVA使用apache commons-fileupload组件完成文件上传到服务器功能
- 图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传