最近在做一些活动站点，有几个是通过手机来上传图片。

先推荐个上传插件：

jQuery-File-Upload

https://github.com/blueimp/jQuery-File-Upload

之前一直用的uploadify，免费版的在手机端里貌似不支持swf，然后用的uploadfive，会出现各种的bug 最终选用这个jquery-upload用的效果还是不错的。

列举一下简单的用法：

//首先引入js

<script src="__PUBLIC__/js/jquery.min.js"></script>

<script src="__PUBLIC__/qupload/js/vendor/jquery.ui.widget.js"></script>

<script src="__PUBLIC__/qupload/js/jquery.iframe-transport.js"></script>
<script src="__PUBLIC__/qupload/js/jquery.fileupload.js"></script>

 

//初始化

<script type="text/javascript">
//uploadingBox.uploadingBoxShow();

$("#fileField").fileupload({
url:"{:U('Home/Index/upload')}",//文件上传地址，当然也可以直接写在input的data-url属性内
validation: {
allowedExtensions: ['jpeg', 'jpg', 'png']
},
add: function (e, data) {
uploadingBox.uploadingBoxShow();
data.submit();
},
//formData:{param1:"p1",param2:"p2"},//如果需要额外添加参数可以在这里添加
done:function(e,result){
$('#container_box').hide();
//done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
//注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
//返回的数据在result.result中，假设我们服务器返回了一个json对象
if(result.result == "111" || result.result == "222"){
window.location="{:U('Home/Index/photo')}";
}
else if(result.result == "Invalid file type."){
alert("请选择图片类型的文件上传");
}
else{
alert(result.result.msg);
}
// console.log(JSON.stringify(result.result));
}
})
</script>

 

//input

<input type="file" name="fileField" class="file" id="fileField" size="28" />

2.最终效果是吧用户上传的图片进行处理，生成一张新的图片。用的方法是放到canvas进行渲染合成图片。

这里会有遇到一个问题，在iphone 系统7.x的版本中，用户选择拍照上传照片处理合成的图片会被压扁。

这里的问题只出现在iphone 7.x的版本中。

原因是上传的图片尺寸过大。而导致的canvas里生成的图片压扁。

解决办法就是在后台上传图片的时候把图片处理一下。

我做的办法是：获取下尺寸，只要超过3000的就给压缩了一半的尺寸。这问题就解决了。

3.还有一个问题就是在iphone图片竖着拍的时候，在上传照片的时候，上传上去是倒着的。但是，横着拍的照片上传上去是正常的。

这里做了一个判断处理

 $templateInfo = @getimagesize($tempFile);
 $src_image[0] = $this->_getImgRef($tempFile);
 if ($templateInfo[2] == 2) {
     $pic = exif_read_data($tempFile);
     if (isset($pic['Orientation'])) {
        if ($pic['Orientation'] == 6) {
           $tt = 1;//已经保存
           $degrees = 270;
           $src_image[0] = imagerotate($src_image[0], $degrees, 0);
           //imagejpeg($src_image[0],'test'.'.'.$fileParts['extension']);//重新保存图片
           //$this->resizeImage($src_image[0], $templateInfo[0]/2, $templateInfo[1]/2, $targetFile);
           $this->_saveImg($tempFile,$src_image[0],$targetFile);

           //图片处理过大进行裁剪
            if($templateInfo[0]>3000 || $templateInfo[1]>3000){
                $image = new \Think\Image();
                $image->open($targetFile);
                $image->thumb($templateInfo[0]/2,$templateInfo[1]/2)->save($targetFile);
            }
            $this->ajaxReturn("222");

          }
     }
}