js图片上传(配合七牛云)

我是用bootstrap+layer+jQuery做的，一些样式使用了bootstrap和layer的样式，如果不使用这两个框架可以自行修改样式。这篇博客主要是说功能实现。

上传操作主要是通过input来实现的

<input type="file" id="cardFileupload" class="x-file" accept="image/*" />

效果如下图：

因为上传input的样式并不好看，我们也无法修改其样式，所以就想了一个办法：用一个按钮代替这个input执行上传操作，主要实现方式是想办法隐藏input框，在点击按钮的时候让它去触发input的方法。

<!-- 上传图片 -->
<div id="box">
	<div class="form-group">
	    <label class="col-sm-3 control-label">图片：</label>
	    <div class="col-sm-9">
	    	<!--选择图片按钮-->
	        <button id="btnCardAdd" class="btn btn-primary" type="button" onclick="document.getElementById('cardFileupload').click();"><i class="fa fa-plus"></i>&nbsp;&nbsp;选择图片</button>
	        <!--实际执行上传操作-->
	        <input type="file" id="cardFileupload" class="x-file"  onchange="parts_manage.loadLocalImage(this,'cardImage',0);" accept="image/*"/>
	    </div>
	</div>
	<div class="form-group">
	    <label class="col-sm-3 control-label"></label>
	    <div class="col-sm-9">
	    	<!--图片展示区域-->
           <ul id="uploadImgBox"></ul>
	    </div>
	</div>
</div>

页面结构和样式好了之后我们就开始写功能了。
我首先是把图片上传至七牛云拿到一个图片地址之后，再去往页面上添加标签。

//点击按钮触发此方法，用于图片上传
loadLocalImage: function(fileObject, imageID, imageType) {
    if(typeof FileReader == 'undefined') {
        alert("当前浏览器不支持FileReader接口");
        return;
    }
    var file = fileObject.files[0];
    let reader = new FileReader() ;//新建一个FileReader对象
    reader.readAsDataURL(file) ;//将读取的文件转换成base64格式
    reader.onload = function(e) {
        var bytes = window.atob(e.target.result.split(',')[1]); //去掉url的头，并转换为byte
        //处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        //获取图片的blob对象，因为上传至七牛云需要blob对象
        var blobData = new Blob([ab], {
            type: 'image/png'
        });
        // 图片上传至七牛云
        parts_manage.qiniuUpload(
            blobData,
            file.name,
            $('#uploadImgBox')
        );
    }
},

/**七牛云上传图片
 * cardImageUrl-----需要上传图片的bolb地址
 * fileName-----上传图片的原文件名
 * nodeObj------显示图片的盒子
 * */
qiniuUpload: function(cardImageUrl, fileName, nodeObj) {
	//获取七牛云token，这个需要请求后台接口获得
    $.ajax({
        url: win.utils.services.getQiniuToken,
        type: 'get',
        dataType: 'json',
        success: function (res) {
            var qiniuToken = res.token;
            //拿到token之后，请求七牛云，将图片上传至七牛云
            var observable = qiniu.upload(
                cardImageUrl, //上传图片的blob对象
                fileName, //图片名
                qiniuToken, //token
                {
                    fname: fileName,
                    params: {}, //用来放置自定义变量
                    mimeType: null
                }, {
                    useCdnDomain: true,
                    region: qiniu.region.z0
                }
            );
            observable.subscribe({
                complete(res) {
                	//图片上传成功之后，获取图片地址，添加到img标签的src内，连同其他标签元素一起追加到图片显示区域
                    var qiniuImgUrl = '在七牛云网站上创建的存储空间名称地址'+res.key;
                    nodeObj.append('<li>\n' +
                        '<img class="cardImage" style="margin-top: 10px; width: 100px; height: 100px; max-width: 400px; border: 10px solid #EEEEEE;" src='+qiniuImgUrl+' />\n' +
                        '<span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span>\n' +
                        '</li>');
                }
            });
        }
    });
},

删除图片方法：
查了一些资料发现js好像没有办法直接删除上传至七牛云的图片，需要后台写接口去做这个操作，所以我这里只写了删除显示的图片。

// 删除上传图片
$('#uploadImgBox').on('click','span',function () {
    $(this).parents('li').remove();
});

上传多个图片也可以实现：

js上传图片到七牛云参考：https://developer.qiniu.com/kodo/sdk/1283/javascript
后台获取七牛云token：https://www.jianshu.com/p/f71349f4762a