从另外页面拖放上传


以下代码段允许从另一个页面通过拖放上传图像:

<script src="https://raw.github.com/betamax/getImageData/master/jquery.getimagedata.min.js"></script>
<script>
$(document).bind('drop dragover', function (e) {
    // Prevent the default browser drop action:
    e.preventDefault();
});
$(document).bind('drop', function (e) {
    var url = $(e.originalEvent.dataTransfer.getData('text/html')).filter('img').attr('src');
    if (url) {
        $.getImageData({
            url: url,
            success: function (img) {
                var canvas = document.createElement('canvas');
		canvas.width = img.width;
		canvas.height = img.height;
                if (canvas.getContext && canvas.toBlob) {
                    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
                    canvas.toBlob(function (blob) {
                        $('#fileupload').fileupload('add', {files: [blob]});
                    }, "image/jpeg");
                }
            }
        });
    }
});
</script>

上面代码段使用了 canvas.toBlob 进行 polyfill。译者注:polyfill(polyfiller),指的是一个代码块。这个代码块向开发者提供了一种技术, 这种技术可以让浏览器提供原生支持,抹平不同浏览器对 API 兼容性的差异。

由于同源策略(SOP,Same-origin policy)也适用于 canvas 元素,因此无法直接从另一个域名下加载图像。

所以,上面代码段其中有一项前提条件,需要一个服务端代理去检索图像数据。代码中就是得把 $.getImageData 库和 jQuery FileUpload 库一起引用。

例子中的内容类型“image/jpeg”是一行硬编码,你需要根据实际上传图像的类型进行修改。你可以更新你的代理服务器脚本以返回内容类型。