Article Detail

谷歌浏览器输入框文本框粘贴图片网络图片和截图

粘贴图片 window. addEventListener ( "paste" , function ( e ) { if ( e && e. clipboar...

HTML 阅读 27.3万 3 分钟阅读 2017-06-08 09:12

<textarea>粘贴图片</textarea><script>window. addEventListener ( "paste" , function ( e ) { 
    if ( e && e. clipboardData && e. clipboardData . types 
                && e. clipboardData . items . length ) { 
        var clipboardData = e. clipboardData , 
            type = clipboardData. types ; 
        if ( type. indexOf ( 'Files' ) !== - 1 ) { 
            var item = clipboardData. items [ 0 ] , 
                reader = new FileReader ( ) ; 
            reader. onload = function ( event ) { 
                var img = document. createElement ( 'img' ) ; 
                img. src = event. target . result ; 
                document. body . appendChild ( img ) ; 
            } 
            //对复制图片的处理，非截图 
            if ( item . kind === 'string' && clipboardData. items [ 1 ] ) { 
                item = clipboardData. items [ 1 ] ; 
            } 
            reader. readAsDataURL ( item . getAsFile ( ) ) ; 
        } 
    } 
} )</script>

Comments 评论区

广西南宁市 2017-06-08 09:14

html5将图片转换base64进行上传、应该能解决微信内置浏览器上传图片

function readFile(obj){ 
        var file = obj.files[0]; 	
        //判断类型是不是图片
        if(!/image\/\w+/.test(file.type)){   
                alert("请确保文件为图像类型"); 
                return false; 
        } 
        var reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = function(e){ 
                alert(this.result); //就是base64
 
        } 
} 

<input type="file"  id="picFile" onchange="readFile(this)" />

#⁰

广西南宁市 2017-06-08 09:15

简单的html5 File base64 图片上传

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>简单的html5 File测试 for pic2base64</title> 
<style> 
</style> 
<script> 
window.onload = function(){ 
    var input = document.getElementById("demo_input"); 
    var result= document.getElementById("result"); 
    var img_area = document.getElementById("img_area"); 
    if ( typeof(FileReader) === 'undefined' ){
        result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！"; 
        input.setAttribute('disabled','disabled'); 
    }else{
        input.addEventListener('change',readFile,false);
    } 
}
function readFile(){
    var file = this.files[0]; 
    //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件   
    if(!/image\/\w+/.test(file.type)){
        alert("请确保文件为图像类型"); 
        return false; 
    }
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    console.log();
    reader.onload = function(e){ 
            result.innerHTML = this.result; 
            img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>'; 
    }
} 
</script> 
</head>  
<body> 
    <form action="file.php" method="post">
<input type="file" value="sdgsdg" id="demo_input" /> 
<textarea name="img" id="result" rows=30 cols=300></textarea> 
<p id="img_area"></p> 
<input type="submit" value="提交">
</form>
</body> 
</html>

服务器代码：

<?php
$base64_url=$_POST['img'];
$base64_body = substr(strstr($base64_url,','),1);
$data= base64_decode($base64_body );
file_put_contents('1.jpg',$data);
//或$image = imagecreatefromstring($data);
 ?>

#⁰

广西南宁市 2017-06-08 09:19

base64编码的图片上传到服务器

function base64_upload($base64) {
    $base64_image = str_replace(' ', '+', $base64);
    //post的数据里面，加号会被替换为空格，需要重新替换回来，如果不是post的数据，则注释掉这一行
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image, $result)){
        //匹配成功
        if($result[2] == 'jpeg'){
            $image_name = uniqid().'.jpg';
            //纯粹是看jpeg不爽才替换的
        }else{
            $image_name = uniqid().'.'.$result[2];
        }
        $image_file = "./upload/test/{$image_name}";
        //服务器文件存储路径
        if (file_put_contents($image_file, base64_decode(str_replace($result[1], '', $base64_image)))){
            return $image_name;
        }else{
            return false;
        }
    }else{
        return false;
    }
}

#⁰

广西南宁市 2017-06-08 09:24

base64图片上传

首先来看一下HTML5的FileReader对象

方法

方法名参数描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
接口事件

事件描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成，无论成功失败
下面是实现

javascript

function readAsDataURL(m_this,id){
      if (typeof m_this.files == 'undefined' || typeof FileReader == 'undefined') {
            alert('当前浏览器不支持图片上传，请改用IE10以上或chrome等最新浏览器。');
            return false;
      }

      if(!/image\/\w+/.test(m_this.files[0].type)){  
          alert("请上传图片！");  
          return false;  
      } 

      var reader = new FileReader();
      reader.onload = function(e) {
            //this.result 返回结果
            $(id).attr('src',this.result);
            //把结果放在img对象中，以备他用    
            var img = new Image();
            img.src = result;
      }
      reader.readAsDataURL(m_this.files[0]); 
}

//调用
$('#inputFile').on('change',function(){
    var m_this = this;
    readAsDataURL(m_this,'#ImgPr');                       
})

html

<img id="ImgPr" src=""/>        
<input type="file" class="" id="inputFile" >

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。