上传图片本地预览是如何实现的?需要兼容chrome、Firefox

x_hola
  • 666

上传图片本地预览是如何实现的?
比如segmentfault。

回复
阅读 2.8k
3 个回答

我这里有一段从网络上看到的代码:
jQuery.fn.extend({

uploadPreview: function (opts) {
    var _self = this,
        _this = $(this);
    opts = jQuery.extend({
        Img: "ImgPr",
        Width: 100,
        Height: 100,
        ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
        Callback: function () {}
    }, opts || {});
    _self.getObjectURL = function (file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file)
        }
        return url
    };
    _this.change(function () {
        if (this.value) {
            if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
                this.value = "";
                return false
            }
            try {
                var dataurl = _self.getObjectURL(this.files[0]);
                alert(dataurl);
            } catch (e) {
                alert(e.message);
            }
        }
    })
}

});
可兼容你说的那两个浏览器。

JS:

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

HTML:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

segmentfault是上传后获取的url地址显示图片的.

如果你需要上传之前预览:DEMO:https://jsfiddle.net/rainwsy/ca8brrge/
html:

<input id="file" type="file" />
  <img id="preview" />

js

var file = document.getElementById('file');
var preview = document.getElementById('preview');

file.addEventListener('change', function() {  
  preview.src = URL.createObjectURL(this.files[0]);
}, false);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏