首页 > 代码库 > 原生Js图片上传
原生Js图片上传
上传图片通常用两种格式：
base64，byte
----------------------------------------------------------------------------------------
byte上传：
FileReader.readAsArrayBuffer//将file读取为ArrayBuffer
base64上传
FileReader.readAsDataUrl//将file读取为Url。
----------------------------------------------------------------------------------------
====Byte上传===
前端
<input type="file" onchange="wl(event)" filetype="image/*"/>
Js
function FW(event) var input = event.target; var reader = new FileReader(); reader.onload = function(){ var dataAF = reader.result; httpHelper({ type:‘post‘, async:‘true‘, data:dataAF, success:function(){ //上传成功 }, error:function(){ //上传失败 } }); }; reader.readAsDataBuffer(input.files[0]);};function httpHelper(params) { var request; if(XMLHttpRequest) request=new XMLHttpRequest(); else request=new ActiveXObject("Microsoft.XMLHTTP"); request.onreadystatechange = function () { if (request.readyState == 4) { if (request.status == 200) { if (params.success) params.success(request.responseText); } else if (parseInt(request.status / 100) == 4) { if (params.error) params.error(request.responseText); } } } request.open(params.type, params.url, params.async); try { request.send(params.data||null); } catch (e) { if (params.error) params.error(request.responseText); }}
后台直接从request的stream读取，储存为图片就好了，图片格式可以放到请求头里。
----------------------------------------------------------------------
======base64=======
又时读取文件是图片，读取之后提供要浏览。这时需要把file读取为Url，把Url上传到服务器后需要对Url进行分解才能得到自己想要的图片base64数据。
如果用get请求上传图片时，有些base64特殊字符会被转义（=，+，-），此时需要在服务端还原。然后把base64解码为byte数组，然后创建为图片。
原生Js图片上传
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。