html5上传图片代码,js上传图片并预览

　　在开发H5应用的时候碰到一个问题，应用只需要一张小的缩略图，而用户用手机上传的确是一张大图，手机摄像机拍的图片好几m，这可要浪费很多流量。

　　像我这么为用户着想的程序员，绝对不会让这种事情发生的，于是就有了本文。

　　获取图片

　　通过文件应用程序接口获取图片。

　　var输入=文档。createelement(“input”)；input . type= file input . addevent listener( change ，function(){ var file=this。文件[0]；});输入。单击()；预览图片

　　使用createObjectURL()或者字符输入流预览图片

　　var img=文档。createelement(“img”)；img.src=window .URL.createObjectURL(文件);var img=文档。createelement(“img”)；var reader=new FileReader()；读者。onload=函数(e){ img。src=e .目标。结果；}reader.readAsDataURL(文件);使用 canvas 做缩略图

　　var canvas=文档。createelement(“canvas”)；var CTX=画布。获取上下文(“2d”)；var MAX _ WIDTH=800 var MAX _ HEIGHT=600 var WIDTH=img . WIDTH var HEIGHT=img . HEIGHT if(宽度高度){如果(宽度最大宽度){高度*=最大宽度/宽度；WIDTH=MAX _ WIDTH } } else { if(HEIGHT MAX _ HEIGHT){ WIDTH *=MAX _ HEIGHT/HEIGHT；HEIGHT=MAX _ HEIGHT } } canvas . width=宽度；canvas.height=高度；ctx.drawImage(img，0，0，width，height)；上传缩略图

　　画布。to blob(function(blob){ var form=new FormData()；form.append(file ，blob)；fetch(/api/upload ，{method: POST ，body:form })；});结语

　　演示：weekcool.com/js/upload.j…

　　总结

　　以上所述是小编给大家介绍的HTML5实现图片上传预处理功能，希望对大家有所帮助！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。