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

图片上传使用了七牛的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参数实现预览?

阅读 4.9k
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)));
    }
}

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
七牛云问答
子站问答
访问
宣传栏