移动端web无刷新上传图片【兼容安卓IOS】-阿里云开发者社区

移动端web无刷新上传图片【兼容安卓IOS】

2017-11-16 1852

简介：

+关注继续查看

博客已转移到：PHP博客

需求手机端网页或者微信无刷新上传头像

环境手机浏览器或者微信浏览器(支持HTML5)

实现方式 LocalResizeIMG

地址

https://github.com/think2011/LocalResizeIMG(原版地址)

链接: http://pan.baidu.com/s/1ntNYXrb 密码: 71cp(个人修改版)

说明原版只能指定固定的图片宽度，而修改版扩展原图片上传

使用方式

<h1 class="text-center">LocalResizeIMG-本地压缩 1.0</h1>

    <hr/>

    <input type="file" />

    <hr/>
 
    <!-- javascript

        ================================================== -->

    <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js" type="text/javascript"></script>

    <script src="localResizeIMG.js" type="text/javascript"></script>

    <!-- mobileBUGFix.js 兼容修复移动设备 -->

    <script src="patch/mobileBUGFix.mini.js" type="text/javascript"></script>

    <script type="text/javascript">

        $('input:file').localResizeIMG({

             width: 100,

             quality: 0.1,

             success: function (result) {

             var img = new Image();

             img.src = result.base64;
 
             $('body').append(img);

             console.log(result);

             }

         });

    </script>

简单说明:width是生成的图片的宽度，个人修改里，如果指定width为1，则为原图宽度

quality是图片的质量

success:生成成功以后是base64码，在success里可以用ajax发送到服务器端保存，base64会生成两种：一种是带前缀说明图片类型的base64码，可以直接放到img标签里使用，调用方法：result.base64 还有一种是result.clearBase64，不带说明的，读取方法:result.clearBase64。

服务器端代码:

$path='./Uploads/'.date('Ymd').'/';

        if(!file_exists($path)){

            mkdir($path);

        }

        $file=$path.time().'.jpeg';

        $base64=base64_decode($_POST['head']);

        file_put_contents($file, $base64)