用type为file的input发送图片到后台,传统的方法是直接使用一个form发送。现在就想用一个input来实现ajax发送,不知道post过去的实质内容是什么,如何取到这个内容
对于异步上传来说,如果仍想用文件直接上传方法的话,可以采用HTML5的
FormData
,具体操作可以参考这篇博客。http://www.cnblogs.com/lhb25/...本人还有另外一种异步上传图片的方法。先将图片转换成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...
你这是2个问题, 接受已经说过了, 要用js上传图片也很容易 获取这个input的target里的文件 append到formdata
里用xmlhttprequest
发送, 接受方式一样。