实例 | WEUI框架uploader上传图片,传入服务器

// js
$(function() {
    // 允许上传的图片类型  
    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
    // 1024KB，也就是 1MB  
    var maxSize = 1024 * 1024;
    // 图片最大宽度  
    var maxWidth = 300;
    // 最大上传图片数量  
    var maxCount = 1;
    $('.js_file').on('change', function(event) {
        var files = event.target.files;

        // 如果没有选中文件，直接返回  
        if (files.length === 0) {
            return;
        }

        for (var i = 0, len = files.length; i < len; i++) {
            var file = files[i];
            var reader = new FileReader();

            // 如果类型不在允许的类型范围内  
            if (allowTypes.indexOf(file.type) === -1) {
                $.weui.alert({
                    text: '该类型不允许上传'
                });
                continue;
            }

            if (file.size > maxSize) {
                $.weui.alert({
                    text: '图片太大，不允许上传'
                });
                continue;
            }

            // if ($('.weui_uploader_file').length >= maxCount) {
            //     $.weui.alert({
            //         text: '最多只能上传' + maxCount + '张图片'
            //     });
            //     return;
            // }

            reader.onload = function(e) {
                var img = new Image();
                img.onload = function() {
                    // 不要超出最大宽度  
                    var w = Math.min(maxWidth, img.width);
                    // 高度按比例计算  
                    var h = img.height * (w / img.width);
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 设置 canvas 的宽度和高度  
                    canvas.width = w;
                    canvas.height = h;
                    ctx.drawImage(img, 0, 0, w, h);
                    var base64 = canvas.toDataURL('image/png');

                    // 插入到预览区  
                    var $preview = $('

// php
public function up_weui(){
    $img = isset($_POST['img'])? $_POST['img'] : '';
     
    // 获取图片
    list($type, $data) = explode(',', $img);
     
    // 判断类型
    if(strstr($type,'image/jpeg')!=''){
        $ext = '.jpg';
    }elseif(strstr($type,'image/gif')!=''){
        $ext = '.gif';
    }elseif(strstr($type,'image/png')!=''){
        $ext = '.png';
    }
    // 生成的文件名
    $uploads = "uploads/";
    $path = rtrim($uploads,'/')."/".date('Y/m/d/');
    if(!file_exists($path)){
        mkdir($path,0777,true);
    }
    $photo = $path.time().$ext;

    // 生成文件
    file_put_contents($photo, base64_decode($data), true);
    // 返回
    header('content-type:application/json;charset=utf-8');
    $res = array('img'=>$photo);
    
    echo json_encode($res);
}