H5通过FormData提交图片问题

文章 · 本文由 · 快乐的小飞侠 · 发布于 9月前 · 2467 阅读

      从在环球到映客,跟前端配合写图片上传接口,发现图片上传貌似是前端的一块通病!后端要的file对象,他们貌似不懂是个什么东西,更别提怎么把图片传到后端了。所以只要涉及到图片上传,js基本都需要后端来写,很蛋疼!写个简单的demo纪念一下:

<html>
<input class="click_img" accept="image/*" type="file" onchange="imgPreview(this)" name="file[]" multiple>

<script>
    var data = new FormData();
    function imgPreview(fileDom){
        //判断浏览器是否支持
        if(window.FileReader){
            var reader = new FileReader();
        }else{
            alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
        }
        //获取文件对象信息
        var file = fileDom.files[0];
        //判断是否是图片
        var imageType = /^image\//;
        
        if (!imageType.test(file.type)) {
            alert("请选择图片!");
            return;
        }
        
        reader.onload = function(e){
            //此处加逻辑判断比如大小
            
            
            //图片append到data对象中
            reader.readAsDataURL(file);
            data.append(‘file',file);
        }
    }
    
    //ajax请求
    $.ajax({
        url : '',
        type : 'post',
        dataType : 'json',
        cache: false,
        contentType: false,    //不可缺
        processData: false,
        data : data,
        success : function (data) {
            
        }
})
</script>
</html>