1.htmlè¯è¨ä¸rgbaç¨ä¸äº
2.Source not found for Response.getWriter()
3.大文件处理(上传,下载)思考
htmlè¯è¨ä¸rgbaç¨ä¸äº
è¯è¨ä¸rgbaç¨ä¸äº
ï¼HTMLè¯è¨ä¸,设置èæ¯é¢è²ç代ç æ¯background-colorï¼è¯æ³æ ¼å¼ä¸º{ background-colorï¼trans
è¯è¨ä¸valiçå±æ§valign=顶 bottomåº middleåç´å± ä¸ baselineåºçº¿
è¯è¨ä¸åè¡è¯å¥æ¢è¡<br>
å段<p></p>ä¹è½å®ç°æ¢è¡ææï¼åªä¸è¿è¿ä¸ªæ¯æ®µè½æ ç¾
è¿æ<h1></h1>å°<h6></h6>è¿æ¯è®¾ç½®æ é¢ï¼ä¹è½å®ç°æ¢è¡ææ
ä¸ç¥éä½ å ·ä½éè¦ä»ä¹æ ·çåè¡ï¼æ以就å¤åäºå 个
å¦ä½å¨jspè¯è¨ä¸åµå ¥è¯è¨ï¼PrintWriter out = response.getWriter();
out.println("<>");
out.println("</>");
out.close();
PHPæºç è½ç¨äºè¯è¨ä¸å?å½ç¶å¯ä»¥äºã常ç¨çæ¹æ³æ两ç§ï¼
1ã<?php ?>
2ã<script language="php"> </script>
HTMLè¯è¨ä¸ submitåbuttonä»ä¹å·®å«
submitæ¯æ交
Buttonæ¯æ®éæé®
ä»ä¸¤åºå«æ¯è½ç¶çèµ·æ¥é½æ¯æé®ï¼ä½æ¯sumbitèªå¨è§¦åFORMæ交æ¹æ³
å¦æä½ ç»æ®éæé®ä¹å ä¸è¿ä¸ªæ¹æ³ï¼ä¹è½å®ç°è¿ä¸ªåè½ï¼ä¸è¿è¦èªå·±åæ¹æ³
type=button å°±å纯æ¯æé®åè½
type=submit æ¯åé表å
ä½æ¯å¯¹äºä»äºWEB UIç人åºè¯¥è¦æ³¨æå°ï¼ä½¿ç¨submitæ¥æé«é¡µé¢æç¨æ§ï¼
使ç¨submitåï¼é¡µé¢æ¯æé®çenteré®æä½ï¼èå¾å¤WEB软件设计å¸ï¼å¯è½æ²¡æ注æå°submitç»ä¸.
ç¨buttonåå¾å¾é¡µé¢ä¸æ¯æenteré®äºãæ以éè¦æ¯æenteré®ï¼å¿ é¡»è¦è®¾ç½®ä¸ªsubmitï¼é»è®¤enteré®å¯¹é¡µé¢ç¬¬ä¸ä¸ªsubmitè¿è¡æä½ã
<input type=submit name=b1 value="æ交" onClick="bt_submit_onclick()">
æ§è¡å®onClickï¼è½¬å°actionãå¯ä»¥èªå¨æ交ä¸éè¦onClickãæ以说onclickè¿éå¯ä»¥ä¸è¦ã
<input type=button name=b1 value="æ交" onClick="bt_submit_onclick()">
æ§è¡å®onClickï¼è·³è½¬æä»¶å¨ jsæ件éæ§å¶ãæ交éè¦onClickã
Htmlè¯è¨ä¸<td>çå±æ§ï¼idçä½ç¨æ2个ï¼
第ä¸ãä¾cssè·åä»è设置cssæ ·å¼ï¼æ¯å¦ï¼èæ¯äºãé¢è²äºãåä½äºçç
第äºãä¾jsè·åä»è设置ä¸äºjsææï¼æ¯å¦ï¼éèäºãæ¾ç¤ºäºãæ¹åå 容äºãè®¾ç½®æ ·å¼äºï¼
å¦æä¸é¢ä¸¤ç¹ä½ é½ä¸éè¦ï¼é£ä¹ï¼idå±æ§å°±æ¯å¤ä½äºããããå¯ä»¥ä¸åéè¦è¯´æçæ¯ï¼å¦æidå±æ§æ¯é对jsä½ç¨çï¼é£ä¹ï¼idå±æ§å¨å½å页é¢ä¸ï¼å¿ é¡»æ¯å¯ä¸çï¼ä¹å°±æ¯ä¸è½æç¸åçidå±æ§ï¼æ 论æ¯træ ç¾è¿æ¯divæ ç¾ãå 为jsåªä¼è¯å«ç¸åidå±æ§ç第ä¸ä¸ª
<td>IDæ¯æå ç´ çæ个ç¹å®id ï¼æ¯å¦æ ·å¼ä¸ï¼ç¹å®æ个å¼ï¼ç±»ä¼¼å±æ§æï¼class, title, style, dir, lang, , nameçï¼ä¹ä¹å¯ä»¥éè¿JavaScript è°åTDå±æ§éè¿IDæ¹åTDçBGCOLORå¼ï¼ä»£ç ä¾å¦ï¼ <script language=\\"javascript\\">var docBody=null;function MouseBgColor(tdid){ docBodyTd=document.getElementById(tdid);if(!docBody){ return;}docBody.style.background='#E1F4EE'; }</script><td id=\\"list\\" onclick=\\"MouseBgColor('list');\\"> çæ¡è¡¥å å¯ä»¥å©ç¨javascriptèæ¬ï¼onclickè¡ä¸ºï¼æ¹åæå®idçåå æ ¼å±æ§
è¯è¨ä¸ï¼æ¡æ¶å¦ä½è®¾è®¡ï¼<>
<frameset rows="%,%">
<frame src=/exampleframe_a.>
<frameset cols="%,%">
<frame src=/exampleframe_b.>
<frame src=/exampleframe_c.>
</frameset>
</frameset>
</>
Source not found for Response.getWriter()
Response è¿éæ¯HttpResponse ï¼æ²¡ææºç çãå½ç¶ä½ å¯ä»¥æ¾å°æºç ï¼ç¨attach sourceç»å®æå®æºç ãè¿ä¸ªä¸å½±åçï¼åªæå¨ä½ è°è¯æ¶æä¼åºç° .
=======================è¡¥å ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼
ä½ åºè¯¥å°é误信æ¯è¾åºçãè¿éåºè¯¥æ¯ç©ºæéäºï¼ä½ çç®çæ¯åajax.
æresponse.getWriter.print()æ¹æï¼
ServletActionContext.getResponse().print("");
ä½ çresponse æä¸ç¥éæ¯è°æ¥è´è´£èµå¼çã
大文件处理(上传,下载)思考
文件处理一直都是前端人的心头病,如何控制好文件大小,文件太大上传不了,文件下载时间太长,信息手机源码asptcp直接给断开了等效果为了方便大家有意义的学习,这里就先放效果图,如果不满足直接返回就行,不浪费大家的时间。
文件上传文件上传实现,分片上传,暂停上传,bzqll 源码恢复上传,文件合并等
文件下载为了方便测试,我上传了1个1g的大文件拿来下载,前端用的是流的方式来保存文件的,具体的可以看这个apiTransformStream
正文本项目的地址是:/post/
requestIdleCallback有不明白的可以看这里:/post/
接下来咋们来计算文件的hash,计算文件的hash需要使用spark-md5这个库,
全量计算文件hashexportasyncfunctioncalcHashSync(file:File){ //对文件进行分片,netqq源码每一块文件都是分为2MB,这里可以自己来控制constsize=2**;letchunks:any[]=[];letcur=0;while(cur<file.size){ chunks.push({ file:file.slice(cur,cur+size)});cur+=size;}//可以拿到当前计算到第几块文件的进度lethashProgress=0returnnewPromise(resolve=>{ constspark=newSparkMD5.ArrayBuffer();letcount=0;constloadNext=(index:number)=>{ constreader=newFileReader();reader.readAsArrayBuffer(chunks[index].file);reader.onload=e=>{ //累加器不能依赖index,count++;//增量计算md5spark.append(e.target?.resultasArrayBuffer);if(count===chunks.length){ //通知主线程,计算结束hashProgress=;resolve({ hashValue:spark.end(),progress:hashProgress});}else{ //每个区块计算结束,通知进度即可hashProgress+=/chunks.length//计算下一个loadNext(count);}};};//启动loadNext(0);});}全量计算文件hash,在文件小的objecthashcode源码时候计算是很快的,但是在文件大的情况下,计算文件的hash就会非常慢,并且影响主进程哦
抽样计算文件hash抽样就是取文件的一部分来继续,原理如下:
/***抽样计算hash值大概是1G文件花费1S的时间**采用抽样hash的方式来计算hash*我们在计算hash的时候,将超大文件以2M进行分割获得到另一个chunks数组,*第一个元素(chunks[0])和最后一个元素(chunks[-1])我们全要了*其他的电台+源码元素(chunks[1,2,3,4....])我们再次进行一个分割,这个时候的分割是一个超小的大小比如2kb,我们取*每一个元素的头部,尾部,中间的2kb。*最终将它们组成一个新的文件,我们全量计算这个新的文件的hash值。*@paramfile{ File}*@returns*/exportasyncfunctioncalcHashSample(file:File){ returnnewPromise(resolve=>{ constspark=newSparkMD5.ArrayBuffer();constreader=newFileReader();//文件大小constsize=file.size;letoffset=2**;letchunks=[file.slice(0,offset)];//前面2mb的数据letcur=offset;while(cur<size){ //最后一块全部加进来if(cur+offset>=size){ chunks.push(file.slice(cur,cur+offset));}else{ //中间的前中后去两个字节constmid=cur+offset/2;constend=cur+offset;chunks.push(file.slice(cur,cur+2));chunks.push(file.slice(mid,mid+2));chunks.push(file.slice(end-2,end));}//前取两个字节cur+=offset;}//拼接reader.readAsArrayBuffer(newBlob(chunks));//最后Kreader.onload=e=>{ spark.append(e.target?.resultasArrayBuffer);resolve({ hashValue:spark.end(),progress:});};});}这个设计是不是发现挺灵活的,真是个人才哇
在这两个的基础上,咋们还可以分别使用web-worker和requestIdleCallback来实现,源代码在hereヾ(≧▽≦*)o
这里把我电脑配置说一下,公司给我分的电脑配置比较lower,8g内存的老机器。计算(3.3g文件的)hash的结果如下:
结果很显然,全量无论怎么弄,都是比抽样的更慢。
文件分片的方式这里可能大家会说,文件分片方式不就是等分吗,其实还可以根据网速上传的速度来实时调整分片的大小哦!
consthandleUpload1=async(file:File)=>{ if(!file)return;constfileSize=file.sizeletoffset=2**letcur=0letcount=0//每一刻的大小需要保存起来,方便后台合并constchunksSize=[0,2**]constobj=awaitcalcHashSample(file)as{ hashValue:string};fileHash.value=obj.hashValue;//todo判断文件是否存在存在则不需要上传,也就是秒传while(cur<fileSize){ constchunk=file.slice(cur,cur+offset)cur+=offsetconstchunkName=fileHash.value+"-"+count;constform=newFormData();form.append("chunk",chunk);form.append("hash",chunkName);form.append("filename",file.name);form.append("fileHash",fileHash.value);form.append("size",chunk.size.toString());letstart=newDate().getTime()//todo上传单个碎片constnow=newDate().getTime()consttime=((now-start)/).toFixed(4)letrate=Number(time)///速率有最大和最小可以考虑更平滑的过滤比如1/tanif(rate<0.5)rate=0.5if(rate>2)rate=2offset=parseInt((offset/rate).toString())chunksSize.push(offset)count++}//todo可以发送合并操作了}ATTENTION!!!?如果是这样上传的文件碎片,如果中途断开是无法续传的(每一刻的网速都是不一样的),除非每一次上传都把chunksSize(分片的数组)保存起来哦
控制/post/2024-12-22 17:30
2024-12-22 17:28
2024-12-22 17:07
2024-12-22 15:54
2024-12-22 15:39
2024-12-22 15:26