H5通过FormData提交图片问题 [PHP相关]

作者:快乐的小飞侠 发布于:2018-01-22 浏览:606次 收藏

      从在环球到映客,跟前端配合写图片上传接口,发现图片上传貌似是前端的一块通病!后端要的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>


如果文章对您有所帮助,希望继续支持我们,您的支持是我们最大的动力 ¥打赏
标签: 图片上传 ajax
声明:文章内容由作者原创或整理,未经允许,不得转载!
您需要登录后才可以评论。登录 | 立即注册