夏日博客

A-A+

智能手机用jQuery-File-Upload上传图片及问题总结

2016年01月08日 前端设计 暂无评论 阅读 6 views 次

本文章是以iphone手机上图片过程中一些问题的总结与解决办法了，文章使用的是jQuery-File-Upload插件也有些朋友使用swf是不一样的，因手机不支持swf哦，所以及我们必须使用js来实

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

先推荐个上传插件：

jQuery-File-Upload

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

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

列举一下简单的用法,代码如下:

  1. //首先引入js  
  2. <script src="__PUBLIC__/js/jquery.min.js"></script>  
  3. <script src="__PUBLIC__/qupload/js/vendor/jquery.ui.widget.js"></script>  
  4. <script src="__PUBLIC__/qupload/js/jquery.iframe-transport.js"></script>  
  5. <script src="__PUBLIC__/qupload/js/jquery.fileupload.js"></script>  
  6. //初始化  
  7. <script type="text/javascript">  
  8. //uploadingBox.uploadingBoxShow();  
  9.    
  10. $("#fileField").fileupload({  
  11. url:"{:U('Home/Index/upload')}",//文件上传地址，当然也可以直接写在input的data-url属性内  
  12. validation: {  
  13. allowedExtensions: ['jpeg', 'jpg', 'png']  
  14. },  
  15. add: function (e, data) {  
  16. uploadingBox.uploadingBoxShow();  
  17. data.submit();  
  18. },  
  19. //formData:{param1:"p1",param2:"p2"},//如果需要额外添加参数可以在这里添加  
  20. done:function(e,result){  
  21. $('#container_box').hide();  
  22. //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api  
  23. //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息  
  24. //返回的数据在result.result中，假设我们服务器返回了一个json对象  
  25. if(result.result == "111" || result.result == "222"){  
  26. window.location="{:U('Home/Index/photo')}";  
  27. }  
  28. else if(result.result == "Invalid file type."){  
  29. alert("请选择图片类型的文件上传");  
  30. }  
  31. else{  
  32. alert(result.result.msg);  
  33. }  
  34. // console.log(JSON.stringify(result.result));  
  35. }  
  36. })  
  37. </script>  
  38. //input  
  39. <input type="file" name="fileField" class="file" id="fileField" size="28" />  

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

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

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

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

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

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

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

这里做了一个判断处理,代码如下:

  1. $templateInfo = @getimagesize($tempFile);  
  2.  $src_image[0] = $this->_getImgRef($tempFile);  
  3.  if ($templateInfo[2] == 2) {  
  4.      $pic = exif_read_data($tempFile);  
  5.      if (isset($pic['Orientation'])) {  
  6.         if ($pic['Orientation'] == 6) {  
  7.            $tt = 1;//已经保存  
  8.            $degrees = 270;  
  9.            $src_image[0] = imagerotate($src_image[0], $degrees, 0);  
  10.            //imagejpeg($src_image[0],'test'.'.'.$fileParts['extension']);//重新保存图片  
  11.            //$this->resizeImage($src_image[0], $templateInfo[0]/2, $templateInfo[1]/2, $targetFile);  
  12.            $this->_saveImg($tempFile,$src_image[0],$targetFile);  
  13.    
  14.            //图片处理过大进行裁剪  
  15.             if($templateInfo[0]>3000 || $templateInfo[1]>3000){  
  16.                 $image = new ＼ Think＼ Image();  
  17.                 $image->open($targetFile);  
  18.                 $image->thumb($templateInfo[0]/2,$templateInfo[1]/2)->save($targetFile);  
  19.             }  
  20.             $this->ajaxReturn("222");  
  21.    
  22.           }  
  23.      }  
  24. }  
标签：

给我留言