Ajax实现图片上传

来源:互联网 发布:取名软件免费版 编辑:程序博客网 时间:2024/05/17 22:17

在《Node.js+express+MySQL使用七牛云实现的用户头像修改》,我们已经实现了使用MUI做的H5的app实现了图片的上传。现在公司的PC端需要实现图片的上传,但是之前图片上传的接口已经写好了。就是《Node.js+express+MySQL使用七牛云实现的用户头像修改》里提到的接口。
现在前端要做的就是去适应这个接口。一般做的都是表单提交,显示使用的ajax。
HTML代码:

<input type="file" id="uploadFile" onchange="inputchange('5')" filetype="image/*"/>

前端js代码

// 图片选择改变事件function inputchange(tag){    var inputTag = 'uploadFile' + tag;    var file = document.getElementById(inputTag);    if(window.FileReader){//chrome,firefox7+,opera,IE10+          oFReader = new FileReader();          oFReader.readAsDataURL(file.files[0]);          oFReader.onload = function (oFREvent) {              uploadImage(oFREvent.target.result,tag);         // oFREvent.target.result  结果就是base64的数据          };      }}// 图片上传function uploadImage(imageData,tag){    $.ajax({        url: '/api/upload',        data: {            imgData: imageData // 图片数据流        },        dataType: 'json',        type: 'post',        timeout: 10000,        success: function(data) {            if (data.status == 100 ) {                var img = '#image' + tag;                $(img).attr('src',data.imageUrl);            }else{                alert('图片上传失败!');            }        },        error: function(xhr, type, errorThrown) {            alert('网络异常,请稍后再试!');        }    });}

这里主要的重点是FileReader这个的使用。

1 0
原创粉丝点击