h5上传图片 javascript

h5上传图片是指利用HTML5技术实现网页中图片上传的功能。通常使用JavaScript来控制和处理上传图片的操作。

在HTML5中，可以使用<input type="file">元素来创建一个文件上传的控件。当用户点击该控件时，会弹出一个文件选择框，用户可选择要上传的图片文件。

使用JavaScript来监听文件选择框的change事件，当用户选择了文件后，通过event.target.files可以获取到选中的文件对象。然后可以利用FileReader对象来读取选中的文件内容。

通过FileReader对象的readAsDataURL()方法，可以将选中的图片文件转换为Data URL，即一段以"data:image/jpeg;base64,"开头的Base64编码的字符串。这样就可以将图片显示在网页上，或者发送到服务器进行处理。

接下来，可以利用XMLHttpRequest对象或者Fetch API来将Data URL发送到服务器进行上传处理。服务器接收到上传的图片数据后，可以进行一些处理，比如保存到服务器上，或者进行图片压缩、裁剪等操作，然后返回处理结果给前端。

在上传过程中，可以通过XHR对象的upload属性监听上传进度，或者使用XMLHttpRequest对象的progress事件来实现显示上传进度条。

总而言之，利用HTML5的文件上传功能和JavaScript的处理能力，可以实现简单且便捷的图片上传功能，使得用户可以方便地在网页上上传图片，并进行相应的处理。