Ajax实现图片上传

Posted 小猿猪哥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax实现图片上传相关的知识,希望对你有一定的参考价值。

《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这个的使用。

以上是关于Ajax实现图片上传的主要内容,如果未能解决你的问题,请参考以下文章

Ajax+PHP实现异步图片上传

php+ajax+flash 实现图片裁剪上传

PHP使用Ajax连续实现上传图片

PHP使用Ajax连续实现上传图片

ajax实现上传图片保存到后台并读取

基于HTML5和JSP实现的图片Ajax上传和预览