html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

简介: 原文:html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩)。
原文: html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩)。

上传组件特点

  1. 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB
  2. 纯JS代码,无需Flash,无需更改后台代码即可实现带进度条(IE10+、其它标准浏览器)的上传,其它(eg:IE6+)自动降级为传统方式上传
  3. 单独的图片上传UI,支持图片预览(IE6+、其它浏览器)和缩放(IE10+、其它浏览器)
  4. 上传核心与UI界面分离,可以很方便的定制上传界面包括上传按钮
  5. 上传文件的同时可以指定上传参数,支持上传类型过滤
  6. 完善的事件回调,可针对上传的每个过程进行单独处理
  7. 方便的UI接口,上传界面可以随心所欲的定制

效果如上图。由于浏览器不同,压缩效果各有不同,一个1.1MB、分辨率为 1920x1200 的图片,分辨率缩放为 1024x640 ,IE11上传后为199KB,Chrome45上传后为277KB,Firefox41上传后为360KB。

使用代码

html代码,导入样式及js上传组件,定义上传按钮及视图:

<link href="../css/uploader-image.css" rel="stylesheet" type="text/css" />

<div>
    <a id="upload-target" class="x-button">添加图片并上传</a>
</div>
<div id="upload-view"></div>

<script type="text/javascript" src="../Q.Uploader.image.all.js"></script>

js组件调用:

var uploader = new Q.Uploader({
    url: "api/upload.ashx",
    target: document.getElementById("upload-target"),
    view: document.getElementById("upload-view"),
    //auto: false,

    //图片缩放
    scale: {
        //要缩放的图片格式
        types: ".jpg",
        //最大图片大小(width|height)
        maxWidth: 1024
    }
});

//uploader.start();

一般无需更改后台代码,但如果使用了图片缩放(压缩),Firefox、Chrome 较早的版本上传后,后台可能会获取不到文件名,需要略微处理一下。以asp.net为例:

HttpRequest request = context.Request;

int c = request.Files.Count;

//接收上传的数据并保存到服务器
for (int i = 0; i < c; i++)
{
    HttpPostedFile file = request.Files[i];
    
    //为兼容一些较早的浏览器,此处优先使用上传组件传递的文件名
    string fileName = request["fileName"];
    if (string.IsNullOrEmpty(fileName)) fileName = System.IO.Path.GetFileName(file.FileName);

    string path = context.Server.MapPath("~/upload/" + fileName);
    file.SaveAs(path);
}

 

关于上传

参见  打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器

关于预览

IE10+等浏览器使用html5 api,其它浏览器使用滤镜预览。需要注意的是,IE8+由于安全性考虑,会获取不到文件真实地址,需要特殊处理一下。

//生成图片预览地址(html5)
function readAsURL(file, callback) {
    var URL = window.URL || window.webkitURL;
    if (URL) return callback(URL.createObjectURL(file));

    if (window.FileReader) {
        var fr = new FileReader();
        fr.onload = function (e) {
            callback(e.target.result);
        };
        fr.readAsDataURL(file);
    } else if (file.readAsDataURL) {
        callback(file.readAsDataURL());
    }
}

//图片预览
function previewImage(box, task, callback) {
    var input = task.input,
        file = task.file || (input.files ? input.files[0] : undefined);

    if (file) {
        //IE10+、Webkit、Firefox etc
        readAsURL(file, function (src) {
            if (src) box.innerHTML = '<img src="' + src + '" />';

            callback && callback(src);
        });
    } else if (input) {
        var src = input.value;

        if (!src || /^\w:\\fakepath/.test(src)) {
            input.select();
            //解决ie报拒绝访问的问题
            parent.document.body.focus();
            //获取图片真实地址
            if (document.selection) src = document.selection.createRange().text;
        }

        if (src) {
            box.innerHTML = '<img src="' + src + '" />';

            try {
                if (browser_ie > 6) box.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + src + "')";
            } catch (e) { }
        }

        callback && callback(src);
    }
}

关于缩放(压缩)

原理是先通过canvas调整图片大小,生成base64数据,然后再通过html5 api (Blob) 转换为二进制对象上传。

//将dataURL转为Blob对象,以用于ajax上传
function dataURLtoBlob(base64, mimetype) {
    var ds = base64.split(','),
        data = atob(ds[1]),

        arr = [];

    for (var i = 0, len = data.length; i < len; i++) {
        arr[i] = data.charCodeAt(i);
    }

    if (Blob) return new Blob([new Uint8Array(arr)], { type: mimetype });

    var builder = new BlobBuilder();
    builder.append(arr);
    return builder.getBlob(mimetype);
}

//图片缩放
function scaleImage(src, mimetype, ops, callback) {
    var image = new Image();
    image.src = src;

    image.onload = function () {
        var width = image.width,
            height = image.height,

            maxWidth = ops.maxWidth,
            maxHeight = ops.maxHeight,

            hasWidthScale = maxWidth && width > maxWidth,
            hasHeightScale = maxHeight && height > maxHeight,

            hasScale = hasWidthScale || hasHeightScale;

        //无需压缩
        if (!hasScale) return callback && callback(false);

        //根据宽度缩放
        if (hasWidthScale) {
            width = maxWidth;
            height = Math.floor(image.height * width / image.width);
        }

        //根据高度缩放
        if (hasHeightScale) {
            height = maxHeight;
            width = Math.floor(image.width * height / image.height);
        }

        var canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d");

        canvas.width = width;
        canvas.height = height;

        ctx.drawImage(image, 0, 0, width, height);

        callback && callback(canvas.toDataURL(mimetype), mimetype);
    };
}

 

其它参见源码及示例代码。

代码下载

asp.net 或其它后台示例代码

源码更新请关注Github

写在最后

如果本文或本项目对您有帮助的话,请不吝点个赞。欢迎交流!

目录
相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
3月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
226 0
|
5月前
|
Web App开发
在HTML中用meta控制浏览器默认模式
在HTML文档的`&lt;head&gt;`标签中,通过添加不同的`&lt;meta&gt;`标签可指定浏览器默认使用的内核。使用`&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt;
65 1
|
5月前
|
Web App开发 移动开发 JavaScript
基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
基于VML与HTML5 Canva实现的跨浏览器饼图与折线图
35 5
|
15天前
|
JavaScript 前端开发
|
5月前
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
52 0
|
3月前
|
JavaScript
VUE——如何兼容IE9|IE10|IE11浏览器
VUE——如何兼容IE9|IE10|IE11浏览器
108 0
VUE——如何兼容IE9|IE10|IE11浏览器
|
4月前
|
安全 网络安全
用IE浏览器访问网站提示证书错误
当你在Internet Explorer中遇到证书错误提示,通常是因网站SSL/TLS证书问题或浏览器安全设置需调整。解决方法包括: 检查时间设置 调整IE设置 安装证书 调整计算机时间
|
3月前
|
存储 API 网络架构
【Azure 存储服务】MP4视频放在Azure的Blob里面,用生成URL在浏览器中打开之后,视频可以正常播放却无法拖拽视频的进度
【Azure 存储服务】MP4视频放在Azure的Blob里面,用生成URL在浏览器中打开之后,视频可以正常播放却无法拖拽视频的进度
|
5月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
112 1
使用 JS 实现在浏览器控制台打印图片 console.image()