移动端html5图片上传方法【更好的兼容安卓IOS和微信】

时间：2025-05-15 22:02:06
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 
<title>图片压缩</title> 
<style> 
body { margin:0; padding:0; } 
html { font-size:62.5%; } 
 
.imgzip { padding:1em; } 
.imgzip .itm { padding-bottom:1em; word-break:break-all; font-size:1.2rem; line-height:1.5em; } 
.imgzip .itm .tit { margin-bottom:.5em; background-color:#e71446; color:#FFF; padding:.5rem 1rem; border-radius:3px; } 
.imgzip .itm .cnt { padding:1rem; } 
.imgzip .itm .cnt img { display:block; max-width:100%; } 
.imgzip textarea { width:100%; height:20em; } 
</style> 
</head> 
 
<body> 
<script src="/jquery-1.8."></script> 
<form action="" method="post">
    <input type="file" accept="image/*;capture=camera" class="input" name="img" value=""> 
<div class="imgzip"></div> 
<input type="submit" name="sub" value="提交" class="1"> 
</form>
<script> 
('DOMContentLoaded', init, false); 
 
function init() { 
var u = new UploadPic(); 
({ 
    input: ('.input'), 
    callback: function (base64) { 
         $.ajax({ 
            url:"", 
            data:{str:base64,type:}, 
            type:'post', 
            dataType:'json', 
            success:function(i){ 
                 alert(); 
            } 
         }) 
        }, 
        loading: function () { 

        } 
}); 
} 
 
function UploadPic() { 
     = 0; 
     = 0; 
     = 0; 
     = 0; 
     = 0; 
     = 0; 
     = 0; 
     = 0; 
     = 0; 
     = null; 
     = ''; 
     = ''; 
     = null; 
     = null; 
     = {}; 
     = ''; 
     = function () {}; 
     = function () {
            };
    }

     = function (options) {
         =  || 800;
         =  || 600;
         =  || 3 * 1024 * 1024;
         = ;
         = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};
         =  || function () {
        };
         =  || function () {
        };

        this._addEvent();
    };

    /** 
     * @description 绑定事件 
     * @param {Object} elm 元素 
     * @param {Function} fn 绑定函数 
     */
    ._addEvent = function () {
        var _this = this;

        function tmpSelectFile(ev) {
            _this._handelSelectFile(ev);
        }

        ('change', tmpSelectFile, false);
    };

    /** 
     * @description 绑定事件 
     * @param {Object} elm 元素 
     * @param {Function} fn 绑定函数 
     */
    ._handelSelectFile = function (ev) {
        var file = [0];

         = 

// 如果没有文件类型，则通过后缀名判断（解决微信及360浏览器无法获取图片类型问题） 
        if (!) {
             = [(/\.([^\.]+)$/i)[1]];
        }

        if (!/image.(png|jpg|jpeg|bmp)/.test()) {
            alert('选择的文件类型不是图片');
            return;
        }

        if ( > ) {
            alert('选择文件大于' +  / 1024 / 1024 + 'M，请重新选择');
            return;
        }

         = ;
         = ;
         = ;
         = ;

        this._readImage(file);
    };

    /** 
     * @description 读取图片文件 
     * @param {Object} image 图片文件 
     */
    ._readImage = function (file) {
        var _this = this;

        function tmpCreateImage(uri) {
            _this._createImage(uri);
        }

        ();

        this._getURI(file, tmpCreateImage);
    };

    /** 
     * @description 通过文件获得URI 
     * @param {Object} file 文件 
     * @param {Function} callback 回调函数，返回文件对应URI 
     * return {Bool} 返回false 
     */
    ._getURI = function (file, callback) {
        var reader = new FileReader();
        var _this = this;

        function tmpLoad() {
// 头不带图片格式，需填写格式 
            var re = /^data:base64,/;
            var ret =  + '';

            if ((ret))
                ret = (re, 'data:' + _this.mime[_this.fileType] + ';base64,');

            callback && callback(ret);
        }

         = tmpLoad;

        (file);

        return false;
    };

    /** 
     * @description 创建图片 
     * @param {Object} image 图片文件 
     */
    ._createImage = function (uri) {
        var img = new Image();
        var _this = this;

        function tmpLoad() {
            _this._drawImage(this);
        }

         = tmpLoad;

         = uri;
    };

    /** 
     * @description 创建Canvas将图片画至其中，并获得压缩后的文件 
     * @param {Object} img 图片文件 
     * @param {Number} width 图片最大宽度 
     * @param {Number} height 图片最大高度 
     * @param {Function} callback 回调函数，参数为图片base64编码 
     * return {Object} 返回压缩后的图片 
     */
    ._drawImage = function (img, callback) {
         = ;
         = ;
         = ;
         = ;

         = ( / ).toFixed(2);

        if ( > ) {
             = ;
             = ( / );
        }

        if ( > ) {
             = ;
             = ( * );
        }

         = ('canvas');
        var ctx = ('2d');

         = ;
         = ;

        (img, 0, 0, , , 0, 0, , );

        (());

        (0, 0, , );
         = 0;
         = 0;
         = null;
    };
</script> 
</body> 
</html>

以上是HTML部分


如下是PHP部分

    这部分是上传以后ajax发送base64码到php,

base64码带有图片的说明字符串，所以得用正则去掉，然后base64解码保存到图片的文件中。并且返回地址即可


<?php
$str = $_POST['str'];
        $type = $_POST['type'];
 
        switch($type){
            case 'image/png':
                $ext='.png';
                break;
            case 'image/jpeg';
                $ext='.jpeg';
                break;
            case 'image/jpeg':
                $ext='.jpg';
                break;
            case 'image/bmp':
                $ext='.bmp';
                break;
            default:
                $ext='.jpg';
        }
        $file_path='./Uploads/'.date('Ymd').'/'.time().$ext;
        if(!file_exists(dirname($file_path))){
            mkdir(dirname($file_path),0777,true);
        }
        $img_content = str_replace('data:'.$type.';base64,','',$str);
        $img_content = base64_decode($img_content);
        $result =file_put_contents($file_path,$img_content);

说明如下：

这个也是把图片转成了base64去传送，个人不建议去用js改变图片的大小，建议裁切缩放还是PHP来做吧。

 =  || 800; 
 =  || 600; 
 =  || 3 * 1024 * 1024; 
 = ; 
 = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};

这一部分是对上传图片的配置，应该可以看懂，可以自己去改 


$.ajax({ 
url:"{:U('upload')}", 
data:{str:base64,type:}, 
type:'post', 
dataType:'json', 
success:function(i){ 
alert(); 
}

原文链接：./2366547/1554698

相关文章