web端即时聊天选择文件时向输入款生成文件缩略图，并实现点击缩略图模拟文件的下载

最新推荐文章于 2021-12-31 10:25:50 发布

Challenger是十三哦

最新推荐文章于 2021-12-31 10:25:50 发布

阅读量217

点赞数 3

分类专栏：前端文章标签： jquery javascript html5 css canvas

本文链接：https://blog.csdn.net/qq_23582331/article/details/106693859

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

生成文件缩略图

//生成文件预览图
	function drawFileImg(fileName,fileUrl,fileSize){

//生成文件预览图
	function drawFileImg(fileName,fileUrl,fileSize){
		var myCanvas = $("#myCanvas")[0];
        var context = myCanvas.getContext("2d");
        var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length);
        var img = document.getElementById("otherIoc");
        if (suffix === ".doc" || suffix === ".docx") {
        	img = document.getElementById("wordIoc");
		} else if (suffix === ".xls" || suffix === ".xlsx") {
			img = document.getElementById("excleIoc");
		} else if (suffix === ".pdf") {
			img = document.getElementById("pdfIoc");
		}
        
        context.drawImage(img,10,15,80,120);
        context.font = "32px normal";
        var fileNameAbbreviation = "";
        if(fileName.length > 15){
        	fileNameAbbreviation = fileName.substring(0,9)+"...";
        }else{
        	fileNameAbbreviation = fileName;
        }
        context.fillText(fileNameAbbreviation,100,80,200);
        var fileSizeStr = fileSize.toString();
        if (fileSizeStr.length > 3) {
        	fileSizeStr = fileSizeStr.substring(0,fileSizeStr.length-3)+"."+fileSizeStr.substring(fileSizeStr.length-2,fileSizeStr.length);
		}else{
			fileSizeStr = "0."+fileSizeStr;
		}
        fileSizeStr = fileSizeStr+"kB";
        context.fillText(fileSizeStr,200,120,60);
        var image = new Image();
        //canvas转img
        image.src = myCanvas.toDataURL("image/png");
      	//清空canvas
        context.clearRect(0,0,myCanvas.width,myCanvas.height); 
        image.className = "fileCanvasImgClass";
        image.setAttribute("onclick","downloadFile('"+fileName+"','"+fileUrl+"')");
        image.setAttribute("type","fileImage");//增加自定义标识，用作分割判断
        $("#inp1"+chat_id).append(image);
	}

点击文件预览图模拟下载文件

//点击文件预览图模拟下载文件
	function downloadFile(name,url){

//点击文件预览图模拟下载文件
	function downloadFile(name,url){
		var a = $('<a>',{
       	   text:"111",
       	   href:url,
       	   download:name,
       	   target:"_blank"
       	});
		a[0].click();
	}