欢迎您, 来到 宁时修博客.^_^

移动端(H5)图片处理

2016/11/10 宁时修 php 1774
移动端(H5)图片压缩上传,基于Jquery的前端上传插件,可拍照上传,可选择相册。

移动端(H5)图片压缩上传,基于Jquery的前端上传插件,可拍照上传,可选择相册。

下载文件

首先前往 https://gitee.com/cp.net/html5-make-upload-thumb

下载所需文件。注:如果你安装git,那么可以直接在你本地 

git clone https://gitee.com/cp.net/html5-make-upload-thumb

如果没有安装,直接下载压缩包即可!


引入文件

引入文件顺序可改变,不过必须先引入Jquery

<script src="jquery-3.0.0.min.js"></script>
<script src="layer_mobile/layer.js"></script>
<script src="binaryajax.js"></script>
<script src="exif.js"></script>
<script src="megapix-image.js"></script>
<script src="jquery.make-thumb.js"></script>

html端处理

<form id="j-form">
    <input type="file" name="upfile" id="j-file" />
</form>
    javascript 处理
    $(function(){
        var $form = $('#j-form');
        var $file = $('#j-file');
        var $status = $('.j-status');
        $file.makeThumb({
              width: 400,
              height: 400,
              //mark: {padding: 5, src: 'mark.png', width: 30, height: 30},
              success: function(dataURL, tSize, file, sSize, fEvt) {
                        // post data
                        var $up = $('<input type="hidden" name="base64">');
                        $up.insertAfter($file).val(dataURL);
                        $file.remove();
                        var load = layer.open({type: 2,content: '上传中'});
                        $.ajax({
                            url: "api.php",
                            data: $form.serialize(),
                            method: "POST",
                            async : true,
                            dataType : "json",
                            success: function (data) {
                                layer.close(load);
                                $("#ret").html(data.msg);
                                console.log(data);
                            }

               });
                //$form.submit();
           }
        });
    })

php端处理

 
 <?
 phpheader('Content-Type:text/html;charset=UTF-8');
 // save 
 img$img = $_POST['base64'];
 if (isset($img)) {
     sleep(5);//休息几秒
     //# dataURI base_64 编码上传 手机端常用方式
     $rootPath = './face/' . date('Ymd');$target = $rootPath . "/" . date('Ymd') . "_" . substr(md5(rand(1,10000)),0,6) . ".png" ;
     if (preg_match('/data:([^;]*);base64,(.*)/', $img, $matches)) {
         $img = base64_decode($matches[2]);
         if (!file_exists($rootPath)) {
               mkdir($rootPath,0777,true);
         }
         if (file_put_contents($target, $img)){
             $str = "<h6>文件来自api返回:<h6>";
             $str .= "<img src='{$target}'>";
             exit(json_encode(array('status'=>1,'msg'=>$str)));
         } else {
             exit(json_encode(array('status'=>0,'msg'=>'文件上传失败')));
         }
     } else {
         // 普通上传 这种方式一般不会用(原始上传方式)    
         $uploadFile = $_FILES['upfile'];    
         $target = 'tmp1.jpg';
         if (isset($uploadFile) && is_uploaded_file($uploadFile['tmp_name']) && $uploadFile['error'] == 0) {
             echo 'filename: ' . $uploadFile['name'] . ', ';echo 'type: ' . $uploadFile['type'] . ', ';
             echo 'size: ' . ($uploadFile['size'] / 1024) . ' Kb';
             move_uploaded_file($uploadFile['tmp_name'], $target);
         } else {
             echo 'error: ' . $uploadFile['error'];
         }
     }
 
}

点赞
说说你的看法

所有评论: (0)

# 加入组织

1、用手机QQ扫左侧二维码

2、搜Q群:1058582137

3、点击 宁时修博客交流群