当前位置:Gxlcms > html代码 > 详解html5图片上传支持图片预览压缩及进度显示兼容IE6及标准浏览器

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

时间:2021-07-01 10:21:17 帮助过:27人阅读

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

v1.4版本已支持秒传+分片上传+断点续传(IE10+、其它标准浏览器),具体请参考Github代码。

上传组件特点

  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上传组件,定义上传按钮及视图:

  1. <link href="../css/uploader-image.css" rel="stylesheet" type="text/css" /><p>
  2. <a id="upload-target" class="x-button">添加图片并上传</a>
  3. </p>
  4. <p id="upload-view">
  5. </p>
  6. <script type="text/javascript" src="../Q.Uploader.image.all.js"></script>

js组件调用:

  1. var uploader = new Q.Uploader({
  2. url: "api/upload.ashx",
  3. target: document.getElementById("upload-target"),
  4. view: document.getElementById("upload-view"), //auto: false,
  5. //图片缩放 scale: { //要缩放的图片格式
  6. types: ".jpg", //最大图片大小(width|height)
  7. maxWidth: 1024
  8. }
  9. });//uploader.start();

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


  1. HttpRequest request = context.Request;int c = request.Files.Count;
  2. //接收上传的数据并保存到服务器
  3. for (int i = 0; i < c; i++)
  4. {
  5. HttpPostedFile file = request.Files[i];
  6. //为兼容一些较早的浏览器,此处优先使用上传组件传递的文件名
  7. string fileName = request["fileName"];
  8. if (string.IsNullOrEmpty(fileName)) fileName = System.IO.Path.GetFileName(file.FileName);
  9. string path = context.Server.MapPath("~/upload/" + fileName);
  10. file.SaveAs(path);
  11. }

关于上传

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

关于预览

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

  1. //生成图片预览地址(html5)function readAsURL(file, callback) {
  2. var URL = window.URL || window.webkitURL;
  3. if (URL) return callback(URL.createObjectURL(file));
  4. if (window.FileReader) {
  5. var fr = new FileReader();
  6. fr.onload = function (e) {
  7. callback(e.target.result);
  8. };
  9. fr.readAsDataURL(file);
  10. } else if (file.readAsDataURL) {
  11. callback(file.readAsDataURL());
  12. }
  13. }//图片预览function previewImage(box, task, callback) {
  14. var input = task.input,
  15. file = task.file || (input.files ? input.files[0] : undefined);
  16. if (file) {
  17. //IE10+、Webkit、Firefox etc
  18. readAsURL(file, function (src) {
  19. if (src) box.innerHTML = '<img src="' + src + '" />';
  20. callback && callback(src);
  21. });
  22. } else if (input) {
  23. var src = input.value;
  24. if (!src || /^\w:\\fakepath/.test(src)) {
  25. input.select();
  26. //解决ie报拒绝访问的问题
  27. parent.document.body.focus();
  28. //获取图片真实地址
  29. if (document.selection) src = document.selection.createRange().text;
  30. } if (src) {
  31. box.innerHTML = '<img src="' + src + '" />';
  32. try {
  33. if (browser_ie > 6)
  34. box.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + src + "')";
  35. } catch (e) { }
  36. }
  37. callback && callback(src);
  38. }
  39. }

关于缩放(压缩)

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

  1. //将dataURL转为Blob对象,以用于ajax上传
  2. function dataURLtoBlob(base64, mimetype) {
  3. var ds = base64.split(','),
  4. data = atob(ds[1]),
  5. arr = [];
  6. for (var i = 0, len = data.length; i < len; i++) {
  7. arr[i] = data.charCodeAt(i);
  8. } if (Blob) return new Blob([new Uint8Array(arr)], { type: mimetype });
  9. var builder = new BlobBuilder();
  10. builder.append(arr);
  11. return builder.getBlob(mimetype);
  12. }//图片缩放function scaleImage(src, mimetype, ops, callback) {
  13. var image = new Image();
  14. image.src = src;
  15. image.onload = function () {
  16. var width = image.width,
  17. height = image.height,
  18. maxWidth = ops.maxWidth,
  19. maxHeight = ops.maxHeight,
  20. hasWidthScale = maxWidth && width > maxWidth,
  21. hasHeightScale = maxHeight && height > maxHeight,
  22. hasScale = hasWidthScale || hasHeightScale;
  23. //无需压缩
  24. if (!hasScale) return callback && callback(false);
  25. //根据宽度缩放
  26. if (hasWidthScale) {
  27. width = maxWidth;
  28. height = Math.floor(image.height * width / image.width);
  29. } //根据高度缩放
  30. if (hasHeightScale) {
  31. height = maxHeight;
  32. width = Math.floor(image.width * height / image.height);
  33. } var canvas = document.createElement("canvas"),
  34. ctx = canvas.getContext("2d");
  35. canvas.width = width;
  36. canvas.height = height;
  37. ctx.drawImage(image, 0, 0, width, height);
  38. callback && callback(canvas.toDataURL(mimetype), mimetype);
  39. };
  40. }

相关文章:

用HTML5轻松实现图片预览

javascript实现图片预览和上传(兼容IE)代码分享

JavaScript进阶(八)JS实现图片预览并导入服务器功能

以上就是详解html5图片上传支持图片预览压缩及进度显示兼容IE6及标准浏览器 的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行