HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5上传图片及其相关知识点大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

前几日做了项目,其中有一个模块涉及到上传图片至服务器。今天抽空整理了下,发现越整理涉及的知识点越多,下面例子有参百度的搜图。

知识点:input file、base64、FileReader、canvas压缩、blob、btoa编码和atob解码、FormData。

html dom节点:

<input type="file">认可以选择一个文件。需要上传多张。可以@L_653_8@multiple="true" 属性。一般使用opacity:0;将认样式隐藏,然后再重新写其样式。


FileReader : https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader(参文档)

1、创建对象

var fileReader = new FileReader();

2、判断浏览器是否兼容----ie8下不支持

if( window.FileReader )

3、状态常量

@H_197_57@ @H_197_57@ @H_197_57@ @H_197_57@ @H_673_89@
常量名 描述
EMPTY 0 为开始读取文件
LOADING 1 文件读取中
DONE 2 文件读取完成

在下面例子中,可以分别读取当前状态。

4、属性

@H_197_57@ @H_197_57@ @H_197_57@ @H_197_57@ @H_673_89@
属性 描述
error 读取文件时发生错误
readyState 当前fileReader对象的状态,为上述状态常量的一个
result 读取到的内容

5、方法

@H_197_57@ @H_197_57@ @H_197_57@ @H_197_57@ @H_197_57@ @H_197_57@ @H_673_89@
方法 参数 描述
abort 中止读取,在非LOADING状态时调用会抛出异常
readAsArrayBuffer blob/file 读取为数组,在result中有一个ArrayBuffer对象为读取的内容
readAsBinaryString blob/file 读取为二进制,在result中有读取文件的原始二进制
readAsDataUrl blob/file 读取为dataUrl,在result中有data:url格式的字符串表示读取的内容
readAsTexx blob/file,[encoding] 读取为文本,在result中字符串表示读取的内容

6、事件处理

@H_197_57@ @H_197_57@ @H_197_57@ @H_197_57@ @H_197_57@ @H_197_57@ @H_197_57@ @H_673_89@
事件 描述
onabort 中断时触发
onerror 出错时触发
onload 读取成功时触发
onloadend 读取完成时触发(不论成功是否)
onloadstart 读取开始时触发
onprocess 读取中触发

BASE64:

我们用chrome打开一张图片,在resources里面显示的就是图片的base编码(实际上base编码比原图片稍大)

图片的base64编码也就是将一张图片编码成一个字符串,我们可以用这个字符串给img标签的src赋值,这样我们就可以看到这张图片


如何编写:

在html中:

<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=">
在css中:

BACkground-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

优缺点:

优点:1、减少了http请求;2、可以被gzip;3、没有跨域问题;4、无需虑在更新图片时缓存问题。

缺点:1、ie8以下不支持;2、不论是写在css文件还是html文件中,增加文件的大小;3、图片大了之后,程序员编码相当困难;


应用:

根据实际需求来选择base64显示图片,或者选择css sprite,或者直接使用png等

一般使用场景:很少被更新,实际尺寸很小,在系统中大量使用。


canvas压缩:

在移动应用场景中,用户上传图片一般很大,会导致上传时间过长而失败,既浪费时间也浪费流量,更影响用户体验。我们可以使用canvas的drawImage方法的图形裁剪功能

1、新建image对象,给其src复制base64值,在其监听onload事件;

2、在onload事件方法中新建canvas对象,获取上下文context;

3、设置裁剪比例,调用drawImage方法填充图片

4、通过toDataUrl方法获取裁剪之后的base64值。

详细见下例。


Blob

在传输一些比较大的图片的base64是容易出现转发错误,这里我们可以将base64转换成blob字段写到form表单中提交到后台。一般blob和base64之间的相互转换通过fileReader 的readAsDataUrl和ArrayBuffer的charCodeAt方法。下面列举几个相互转换的方法。来自(http://jsperf.com/blob-base64-conversion)

 var blobToBase64 = function(blob,cb) {
      var reader = new FileReader();
      reader.onload = function() {
        var dataUrl = reader.result;
        var base64 = dataUrl.split(',')[1];
        cb(base64);
      };
      reader.readAsDataURL(blob);
      };

  var base64ToBlob = function(base64,cb) {
      var binary = atob(base64);
      var len = binary.length;
      var buffer = new ArrayBuffer(len);
      var view = new Uint8Array(buffer);
      for (var i = 0; i < len; i++) {
        view[i] = binary.charCodeAt(i);
      }
      cb(new Blob([view]));
      };

  var base64ToBlobSync = function(base64) {
      var binary = atob(base64);
      var len = binary.length;
      var buffer = new ArrayBuffer(len);
      var view = new Uint8Array(buffer);
      for (var i = 0; i < len; i++) {
        view[i] = binary.charCodeAt(i);
      }
      var blob = new Blob([view]);
      return blob;
      };

  var blobToBase64_2 = function(blob,cb) {
      var reader = new FileReader();
      reader.onload = function() {
        var buffer = reader.result;
        var view = new Uint8Array(buffer);
        var binary = String.fromCharCode.apply(window,view);
        var base64 = btoa(binary);
        cb(base64);
      };
      reader.readAsArrayBuffer(blob);
      };


btoa 与 atob:      ---在对base64转blob时就需要用atob对base64进行解码

btoa("javascript");     //"amF2YXNjcmlwdA=="

atob("amF2YXNjcmlwdA==") ;       //"javascript"

注意:在需要转码中文时,需要用encodeURIComponent方法中文处理,解码时用decodeURIComponent

btoa(encodeURIComponent("我喜欢 javascript"));    //"JUU2JTg4JTkxJUU1JTk2JTlDJUU2JUFDJUEyJTIwamF2YXNjcmlwdA=="

decodeURIComponent(atob("JUU2JTg4JTkxJUU1JTk2JTlDJUU2JUFDJUEyJTIwamF2YXNjcmlwdA=="));   //"我喜欢 javascript"


FormData:

我们只需要使用New FormData()创建对象,然后append键值对,后用ajax向后台发生即可。

这里是往FormData对象添加blob字段。

注:使用Ajax将这个FormData对象提交到服务器上时,所发送的http请求头中代表那个Blob对象所包含文件文件名称的"Content-Disposition"请求头的值会是一个空字符串,这会引发某些服务器程序上的错误.从Gecko 7.0开始,这种情况下发送的文件名称改为"blob"这个字符串.

HTML5上传图片及其相关知识点



本次整理实例:

<!DOCTYPE html>
<html lang="en">
<head>
	<Meta charset="UTF-8">
	<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<title>Document</title>
	<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>   <!--引用baidu-->
</head>
<style>
.uploadPic{
	width: 92%;
  	position: relative;
  	margin: 0 auto;
  	height: 2.8rem;
  	line-height: 2.8rem;
  	font-size: 1.3rem;
  	border-radius: 4px;
  	color: #fff;
  	text-align: center;
  	BACkground-color: #72bcc5;
}
.uploadPic>input{
	position: absolute;
  	display: block;
  	width: 100%;
  	height: 100%;
  	right: 0;
  	top: 0;
  	opacity: 0;
}
.uploadPic>img{
	border:none;
}
</style>
<body>
	<div id="uploadPic" class="uploadPic">
		<span>拍摄</span>
		<input type="file" >  <!--这里可以@L_265_71@multiple="true"属性,用来添加多张图片,然后对this.file[]数组操作-->
		<p style="line-height: 1rem;margin: 0.5rem 0;"><progress id="progress" value="0" max="100" style="width: 100%;"></progress></p> 
		<img src="" width="100%" style="height: 21rem;">
	</div>
</body>
<script>
	function upload(file,callBACk) {
        var loading=0;
        var @R_678_10586@l=file.size;
        if(window.FileReader){
        	$("#progress")[0].value=0;
	        var fileReader = new FileReader();
	        fileReader.onload = function() {
	        	console.log(fileReader.readyStatE);  //读取完成
	            compressPic(this.result,callBACk)
	        };
	        fileReader.onerror = function() {
	        	console.log(fileReader.error);
	        };
	        fileReader.onprogress = function (E){
	        	console.log(fileReader.readyStatE);  //读取中
	        	loading += e.loaded;
	        	$("#progress")[0].value=(loading / @R_678_10586@l) * 100; 
	        }
	        console.log(fileReader.readyStatE);  //未读取
	        fileReader.readAsDataURL(filE)
        }else{
        	alert("您的浏览器不支持FileReader");
        }
    }

    function base64ConvertToBlob(picData,type,sizE) {
            type = type || "";
            size = size || 512;
            var decodeFileData = atob(picData);  //此处用atob解码,转码函数btoa。在使用方法时注意操作中文时,需对中文decodeURIComponent转换
            var dataArray = [];
            var len = decodeFileData.length;
            for (var i = 0; i < len; i += sizE) {
                var pieceData = decodeFileData.slice(i,i + sizE);   //这里做了一个512的分组
                var arr = new Array(pieceData.length);
                for (var j = 0; j < pieceData.length; j++) {
                    arr[j] = pieceData.charCodeAt(j)
                }
                var u8a = new Uint8Array(arr);
                dataArray.push(u8a)
            }
            return new Blob(dataArray,{type: typE})
    }

    function compressPic(picData,callBACk) {
        var img=new Image();
        img.onload = function(){
	       	var width = img.width;
	       	var height = img.height;
	       	var standard=800;  //以800为基准压缩
	       	if (width > standard || height > standard) {
	           	var rate = Math.max(width / standard,height / standard);
	           	width /= rate;
	           	height /= rate
	       	}
	    	var canvas = document.createElement("canvas");
	       	canvas.width = width;
	       	canvas.height = height;
	       	var context = canvas.getContext("2d");
	       	context.fillRect(0,canvas.width,canvas.height);
	       	context.drawImage(img,width,height);
	       	var data = canvas.toDataURL("image/jpeg",1);
	       	//var blobData=base64ConvertToBlob(data.replace(/^.*?,/,""),"image/jpeg")  //-----需要去掉符号,不然使用atob方法报错
	       	//doAjax(new FormData().append('image',data));   //后续可以这样做,转换成Blob字段,组装FormData,发送至后台
	       	console.log("the after canvas compress size : " + data.length);
	       	callBACk(data)
        };
        img.src=picData;
        console.log("the before canvas conpress size : "+picData.length);
    }

	$("#uploadPic input").change(function() {
		var file=this.files[0];
		upload(file,function(picData){
            	$("#uploadPic img")[0].src = picData;    //预览
            }
        );
    });
</script>
</html>

大佬总结

以上是大佬教程为你收集整理的HTML5上传图片及其相关知识点全部内容,希望文章能够帮你解决HTML5上传图片及其相关知识点所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。