前端图片直传OSS试验

前段时间参与了一个H5项目，里边有个需求是用户上传图片。当时的方案是前端先调用微信的JSSDK选择图片并上传，然后再从后端下载到服务器上。然而用的时候发现客户端给的图片有大有小，但是由于用了微信的接口，图片在下载之前是没法控制的。后来在想能不能调用HTML5原生的文件上传接口，另外还可以配合阿里云的OSS对图片做进一步处理，所以就有了这篇文章。

1. HTML5原生上传

其实之前也有想过用原生的，可手里的项目全是微信平台的H5，原生上传一直被告知有兼容性问题，所以这个方案一直是被搁置的；只是这次觉得用微信接口实在不爽才重新翻出来的，没想到意外发现手里的米4居然可以正常用。。好了闲话不说，上代码：

<input id="img_input" type="file" accept="image/*" />
<div id="preview_box"></div>

HTML部分主要就是那个input，至于下边那个div，主要是留着放图片预览用的。

<script>
    $("#img_input").on("change", function(e) {
        var file = e.target.files[0]; // 获取图片资源
        var fd = new FormData(); // 用formdata上传文件

        // 只选择图片文件
        if (!file.type.match('image.*')) {
            return false;
        }

        fd.append('file', file, file.name); // 填入文件

        $.ajax({
            url: 'fileupload.php',
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function () {
                // 成功后显示文件预览
                var reader = new FileReader();
                reader.readAsDataURL(file); // 读取文件
                // 渲染文件
                reader.on
load = function(ev) {
                    var img = '<img class="preview" src=http://www.tuicool.com/articles/"' + ev.target.result + '" alt="preview"/>';
                    $("#preview_box").empty().append(img);
                }
            }
        });
    });
</script>

文件填入FormData，然后POST上传，后端（用的PHP）简单写下接收就行。

(然后这里顺便想问下如果直接上传blob的话，PHP后端应该怎么写？有大神路过请不吝赐教~小弟这里先谢过了）

<?php

if ($error == UPLOAD_ERR_OK) {
    $tmp_name = $_FILES["file"]["tmp_name"];
    $name = $_FILES["file"]["name"];
    move_uploaded_file($tmp_name, "$name");
}

然后处理下权限啥的，就能跑啦。

2. 前端压缩（localResizeIMG）

localResizeIMG 是个好插件，用法也很简单，把 GitHub 里的 dist 文件夹拖下来改个名（我改了个“localRZ”），然后直接引用 lrz.bundle.js 文件就行了：

<script src=http://www.tuicool.com/articles/"localRZ/lrz.bundle.js">script>
<script>
    $("#img_input").on("change", function(e) {
        var file = e.target.files[0]; //获取图片资源
        var filename = file.name;

        // 只选择图片文件
        if (!file.type.match('image.*')) {
            return false;
        }
        // LocalResizeIMG处理：
        lrz(file, {width: 400})
            .then(function (rst) {
                $.ajax({
                    url: 'fileupload.php',
                    data: rst.formData, // LocalResizeIMG 直接封装好的
                    processData: false,
                    contentType: false,
                    type: 'POST'
                }).done(function(data, textStatus, jqXHR){
                    // 图片预览
                    var img = new Image();
                    img.src = http://www.tuicool.com/articles/rst.base64;

                    img.on
load = function () {
                        $("#preview_box").empty().append(img);
                    };
                });
                return rst;
            })
            .catch(function (err) {
                // 万一出错了，这里可以捕捉到错误信息
                // 而且以上的then都不会执行
                alert('ERROR:' + err);
            })
            .always(function () {
                // 不管是成功失败，这里都会执行
            });

    });
</script>

localResizeIMG 的 文档 写的挺清楚的，哪里不明白的话可以过去看看。

3. 美化上传按钮

（留坑待续……）

4. 对接OSS

（留坑待续……）