[原创] react初探(二)续[优化]

js ImgUpload react

2015-12-22 1549

紧接很早之前的链接react初探(二),实现图片在js端的压缩。

在手机中使用此控件的时候发现一个很严重的问题,手机照片的尺寸一般都比较大,这样就导致上传照片需要很久很久。。。然后就没有反映了。这个体验真的不好。

其实这个问题早就发现了,只是一直没有去思考解决。今天终于下定决心解决这个问题,思路很简单就是利用html5的canvas,实现图片的压缩。思路有了,就去找找有没有相关的js库可用。感谢前人,github上找到了https://github.com/think2011/LocalResizeIMG

只是修改了图片上传部分的代码(记得引入js文件),注释掉以前的使用jquery插件上传图片的方法。主要修改的代码如下:


        $("#single_image").bind("change", function () {
                lrz(this.files[0], { width: 800 })
                        .then(function (rst) {
                            // 处理成功会执行
                            $.ajax({
                                url: "/common/img_cut_upload",
                                type: "POST",
                                data: { Filedata: rst.base64.split(",")[1] },
                                success: function (msg) {
                                    var url = msg.path;
                                    ManyImgsActions.addImg(url);
                                },
                                error: function (err) {
                                    console.log(err);
                                }
                            });
                        })
                        .catch(function (err) {
                            // 处理失败会执行
                            console.log(err);
                        })
                        .always(function () {
                            // 不管是成功失败,都会执行
                        });
            });