手机端上传图片

(一)html代码结构

        <div class="up_phone">

            上传照片

            <p>

                <span>

                    上传图片

                    <input type="file" onchange="selectFileImage(this)">

                </span>

            </p>

        </div>

(二)js代码操作

    function selectFileImage(fileObj)  {  

            var file = fileObj.files['0'];

            var Orientation = null;  

            if (!file) { 

               return;

            } 

            var rFilter = /^(image\/jpeg|image\/png)$/i;

            if (!rFilter.test(file.type)) { 

                return false;

            }  

            // var URL = URL || webkitURL;  

            EXIF.getData(file, function() {  

                EXIF.getAllTags(this);   

                Orientation = EXIF.getTag(this, 'Orientation');  

                //return;  

            });  

            var oReader = new FileReader();  

            oReader.onload = function(e) {  

                var image = new Image();  

                image.src = e.target.result;  

                image.onload = function()  {  

                    var canvas = document.createElement("canvas");  

                    var ctx = canvas.getContext("2d"); 

                    var pWidth = 430;

                    var pHeight = this.naturalHeight;

                    if(this.naturalWidth > pWidth) {

                        pHeight = pHeight * (pWidth /this.naturalWidth);

                    }else{

                        pWidth = this.naturalWidth;

                        pHeight = this.naturalHeight;

                    }

                    var mpImg = new MegaPixImage(this);  

                        mpImg.render(canvas, {  

                            width: pWidth,  

                            height: pHeight,  

                            quality: 1,  

                            orientation: Orientation  

                    });

                  //ctx.drawImage(this, 0, 0, pWidth, pHeight);

                    base64 = canvas.toDataURL("image/jpeg");  

                    up_img(base64);

                    addImg(base64);

                };  

            };  

            oReader.readAsDataURL(file);

    }

//图片上传的请求地址

function up_img(data){

        if (!mayclick) {return;}

        mayclick = false;

        $.post(

        '/index.php?m=content&c=apply&a=up_img',

        {img:data},

        function(res){

            $('input[name=photo]').val(res);

            mayclick = true;

        });

}

//把图片src地址添加到指定位置

    function addImg(data) {

        $('.up_phone .big_pic').remove();

        var img = '<p class="big_pic">';

            img += '<img src="'+data+'">';

            img += '<em class="icon_clock" onclick="removeImg(this)"></em>';

            img += '<input type="hidden" name="photo"/>';

        img += '</p>';

        $('.up_phone').append(img);

    }

//删除显示的图片

function removeImg(obj){

        $(obj).parent().remove();

}

(三)PHP代码的处理

//上传图片

    public function up_img(){

      $img = $_REQUEST['img'];

      // $relId = $_REQUEST['relId'];

      $img = str_replace('data:image/jpeg;base64,', '', $img);

      $img = str_replace(' ', '+', $img);

      $img = base64_decode($img);

      if(!$img) {

        exit;

      }

      $fileName = date("YmdHis")."_".mt_rand(10000,99999).".jpg";

      file_put_contents(UPLOAD_PATH.$fileName, $img);

      echo $fileName;

      exit;

    }