javascript - 七牛js sdk上传图片之前如何实现本地预览？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 七牛js sdk上传图片之前如何实现本地预览？

ringa_lee 2017-04-11 09:16:33

[JavaScript讨论组]

966

图片上传使用了七牛的js sdk，希望在图片上传之前实现本地预览，这个要如何实现？

我做的尝试

我在BeforeUpload函数中，拿到了参数file，它就是当前上传的图片对象，我想使用URL.createObjectURL()函数来创建一个blob对象实现本地预览

'BeforeUpload': function(up, file) {
    var src=window.URL.createObjectURL(file);
    $("img").attr('src',src);
}

实验结果是行不通的，因为这里的file被七牛处理过了，已经不是一个file对象

<input type='file'>

我们通过type=file选择的文件，都是先存储到一个filelist对象中，然后再从这个数组中将文件取出来，这时候的文件是file对象

我希望能得到指点，七牛这里的file参数，如何处理才能得到一个url参数实现预览？

ringa_lee

全部回复(2)

大家讲道理2017-04-11 09:18:33 2楼

 FilesAdded: function(up, files) {
                            for (var i = 0; i < files.length; i++) {
                                var fileItem = files[i].getNative(),
                                      url = window.URL || window.webkitURL || window.mozURL;
                                var src = url.createObjectURL(fileItem);
                                   var tmpl = '<li style="background-image:url(#url#)"  data-url="#url#"></li>';
                                   $("#uploaderFiles").append($(tmpl.replace(/#url#/ig, src)));
                            }
                        }

赞 +0

添加回复

PHPz2017-04-11 09:18:33 1楼

放弃吧，只支持chrome，没什么用

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>