读取本地图片并预览（转载）

最新推荐文章于 2024-05-21 11:30:58 发布

左之右

最新推荐文章于 2024-05-21 11:30:58 发布

阅读量358

点赞数

分类专栏：前端文章标签： jquery ajax html5

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

转载的URL：http://crayster.iteye.com/blog/1543058

预览图片再切割图片最后进行上传并显示，一直让我头疼不已，后面html5可以读取本地的文件的操作，大大改善之前我之前上传方式：把图片传到服务器然后回显图片给客户端然后用户进行选取坐标给服务器，再让服务器据坐标切割图片。再显示图片给用户。而html5直接读取文件之后，直接在本地的预览选取相应的坐标（jqcode）。最后传给服务器的是：图片的缩放的坐标，原来的图片和坐标，到服务器进行操作的是：先缩放图片，根据坐标再在缩放的图片进行切割，最后完成切图，最终回到客户端显示（ajax）。

<转载的例子>

<!DOCTYPE html>    
    <html>    
    <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
    <script type="text/javascript">  
    function preImg(sourceId, targetId) {  
        if (typeof FileReader === 'undefined') {  
            alert('Your browser does not support FileReader...');  
            return;  
        }  
        var reader = new FileReader();  
      
        reader.onload = function(e) {  
            var img = document.getElementById(targetId);  
            img.src = this.result;  
        }  
        reader.readAsDataURL(document.getElementById(sourceId).files[0]);  
    }  
    </script>  
    </head>  
    <body>  
    <form action="">  
        <input type="file" name="imgOne" id="imgOne" οnchange="preImg(this.id,'imgPre');" />  
        <img id="imgPre" src="" style="display: block;" />    
    </form>  
    </body>  
    </html>