---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

本地压缩上传图片

前端开发 蚂蚁 2260℃ 0评论

最近在折腾移动站的开发,涉及到了一个手机里面上传图片。于是经过N久的折腾,找到一个插件,用法如下:

<!DOCTYPE HTML>
<html lang="zh-CN">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
<head>
    <meta charset="UTF-8">
    <title>LocalResizeIMG</title></head>
<style>    body {
        margin: 20px 20%;
        color: #777;
        text-align: center;
    }</style>
<body><h1 class="text-center">LocalResizeIMG-本地压缩 1.0</h1>
<hr/>
<input type="file"/>
<hr/>
<!-- javascript		================================================== -->
<script src="/api/localResizeIMG-gh-pages/patch/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/api/localResizeIMG-gh-pages/LocalResizeIMG.js" type="text/javascript"></script>
<!-- mobileBUGFix.js 兼容修复移动设备 -->
<script src="/api/localResizeIMG-gh-pages/patch/mobileBUGFix.mini.js" type="text/javascript"></script>
<script type="text/javascript">        $('input:file').localResizeIMG({
        width: 500,
        quality: 0.8,
        success: function (result) {
            var img = new Image();
            img.src = result.base64;
            $('body').append(img);
            $.ajax({
                url: './uploads.php',
                type: 'POST',
                data: {formFile: result.clearBase64},
                dataType: 'HTML',
                timeout: 1000,
                error: function () {
                    alert('Error loading PHP document');
                },
                success: function (result) {
                }
            });
        }
    });    </script>
</body>
</html>

PHP代码:

<?php 
    $base64 = $_POST['formFile'];
    $IMG = base64_decode($base64);
    $path = './';
    file_put_contents($path . time() . '.jpg', $IMG); 
?>

在前端把图片压缩,然后转换成为Base64的编码,再把Base64的编码使用AJAX来POST到服务器,然后在PHP解开Base64,写入到一个文件去。
原插件地址:http://github.com/think2011/LocalResizeIMG
然后发现我朋友也写有一篇这个插件的使用的文章,地址在这里:http://a3147972.blog.51cto.com/2366547/1551066
2015年04月11日12:23:10 Update:这插件的作者已经对插件进行了升级,推荐使用新的插件:https://github.com/think2011/localResizeIMG3/

http://cong5.net/post/260

转载请注明:有爱前端 » 本地压缩上传图片

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情