web前端|H5教程
html5，图片上传，浏览器
web前端-H5教程
以前写过上传组件，见 打造 html5 文件上传组件，实现进度显示及拖拽上传，兼容IE6+及其它标准浏览器，对付一般的上传没有问题，不过如果是上传图片，且需要预览的话，就力有不逮了，趁着闲暇时间，给上传组件添加了单独的图片上传UI，支持图片预览和缩放（通过调整图片的大小以实现图片压缩）。
cms开源asp源码,ubuntu搭建apt源,tomcat网站迁移服务器,开发爬虫网站,php8稳定版,惠民seo推广lzw
v1.4版本已支持秒传+分片上传+断点续传（IE10+、其它标准浏览器），具体请参考Github代码。
上传组件特点
轻量级，不依赖任何JS库，核心代码（Q.Uploader.js）仅约700行，min版本加起来不到12KB
net酒店预订系统源码,vscode显示模拟器,ubuntu安装su,tomcat配置出现404,爬虫抓简历,php qq 发邮件,新手怎么做seo 引流,国外flash网站模板,手机功能牌模板lzw
纯JS代码，无需Flash，无需更改后台代码即可实现带进度条（IE10+、其它标准浏览器）的上传，其它（eg：IE6+）自动降级为传统方式上传
校友信息源码,ubuntu 优化内存使用,爬虫软件像素识别,PHP怎么打开或创建一个文件,大丰seo公司lzw
单独的图片上传UI，支持图片预览（IE6+、其它浏览器）和缩放（IE10+、其它浏览器）
上传核心与UI界面分离，可以很方便的定制上传界面包括上传按钮
上传文件的同时可以指定上传参数，支持上传类型过滤
完善的事件回调，可针对上传的每个过程进行单独处理
方便的UI接口，上传界面可以随心所欲的定制
效果如上图。由于浏览器不同，压缩效果各有不同，一个1.1MB、分辨率为 1920×1200 的图片，分辨率缩放为 1024×640 ,IE11上传后为199KB，Chrome45上传后为277KB，Firefox41上传后为360KB。
使用代码
html代码，导入样式及js上传组件，定义上传按钮及视图：
添加图片并上传
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 较早的版本上传后，后台可能会获取不到文件名，需要略微处理一下。以为例：
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 = \; 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 = \; 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 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); };}
相关文章：
用HTML5轻松实现图片预览
javascript实现图片预览和上传（兼容IE）代码分享
JavaScript进阶(八)JS实现图片预览并导入服务器功能
