[原创] html5客户端图片裁剪

html5 canvas FileReader

2015-08-25 1407

在手机端网站开发的时候,会牵扯到图片上传的问题,因为手机端对flash插件的限制,就需要考虑其他的形式了。

方式1:使用jquery.html5uploader.js这个插件,通过几段简单的代码实现图片上传

在html标签中加入一个隐藏的file控件,通过点击按钮后出发file控件的change事件


              ////////文件上传
              $("#single_image").html5Uploader({
                  name:"Filedata",
                  postUrl: "/common/uploadfile",
                  onSuccess:function(msg){
                      try{
                          var url = JSON.parse(msg.currentTarget.response).url;
                          $("#m_imgCtrl").attr("src",url);
                          $("#ImgUrls").val(url);
                      }
                      catch(e){
                          console.log(e);
                      }
                  }
              });


              //////////文件上传点击
              $("#yl_file_upload").bind("click", function () {
                  $("#single_image").click();
              });


方式2:使用html5的FileReader方法,读取file控件的onload方法返回的数据。然后把数据传递到后台代码中实现上传。通过查看返回的数据我们可以发现onload返回的是图片的base64编码的值,传递到后台后只需要解析成文件保存就好

demo