javascript - 发送图片到后台，不知道如何获取图片的内容

问题描述

问 题

用type为file的input发送图片到后台，传统的方法是直接使用一个form发送。现在就想用一个input来实现ajax发送，不知道post过去的实质内容是什么，如何取到这个内容

解决方案

1. 对于异步上传来说，如果仍想用文件直接上传方法的话，可以采用HTML5的FormData，具体操作可以参考这篇博客。http://www.cnblogs.com/lhb25/...

2. 本人还有另外一种异步上传图片的方法。先将图片转换成base64字符串，然后再把base64字符串提交到服务器上，服务器接收后，可以再用具体的API将base64字符串转换成图片内容。以下为具体实现方法：

var getObjectURL = function(file) {
        var url = null;   
        if (window.createObjectURL !== undefined) { // basic  
            url = window.createObjectURL(file);  
        } else if (window.URL !== undefined) { // mozilla(firefox)  
            url = window.URL.createObjectURL(file);  
        } else if (window.webkitURL !== undefined) { // webkit or chrome  
            url = window.webkitURL.createObjectURL(file);  
        }  
        return url;
    }

getObjectURL方法用于将传入的input中的图片file对象，转换成一个临时的url，而这个url是同域的。

var converImgTobase64 = function(url, callback, outputFormat) {
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img,0,0);
            var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            callback.call(this, dataURL);
            canvas = null; 
        };
        img.src = url;
    }

converImgTobase64方法就是将上面所得到的url传入，通过canvasAPI转换成base64字符串，注意这个url必须是同域的，不可跨域，所以getObjectURL这个方法是很有必要的。

例子：

var input = $("input[type=file]")[0],
    src = getObjectURL(input.files[0]);

converImgTobase64(src, function(base64Str) {
    //处理base64Str相关的callback，可以直接在这里发送ajax请求。
});

这部分组件的代码在本人的一个util库中，欢迎参考并提出整改意见~~~https://github.com/zero-mo/Br...

这篇关于javascript - 发送图片到后台，不知道如何获取图片的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！