在移动端怎样上传图片？，而且在上传前把图片压缩一定的大小？
在移动端怎样上传图片？，而且在上传前把图片压缩一定的大小？
对于异步上传来说，如果仍想用文件直接上传方法的话，可以采用HTML5的FormData，具体操作可以参考这篇博客。http://www.cnblogs.com/lhb25/...
本人还有另外一种异步上传图片的方法。先将图片转换成base64字符串，然后再把base64字符串提交到服务器上，服务器接收后，可以再用具体的API将base64字符串转换成图片内容。以下为具体实现方法：
<code>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;
}</code>getObjectURL方法用于将传入的input中的图片file对象，转换成一个临时的url，而这个url是同域的。
<code>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;
}</code>converImgTobase64方法就是将上面所得到的url传入，通过canvasAPI转换成base64字符串，注意这个url必须是同域的，不可跨域，所以getObjectURL这个方法是很有必要的。
例子：
<code>var input = $("input[type=file]")[0],
src = getObjectURL(input.files[0]);
converImgTobase64(src, function(base64Str) {
//处理base64Str相关的callback，可以直接在这里发送ajax请求。
});
</code>这部分组件的代码在本人的一个util库中，欢迎参考并提出整改意见~~~https://github.com/zero-mo/Br...
另外，图片压缩的话，这里有一个是基于canvas进行操作的，你可以试一下。
http://www.cnblogs.com/xiao-y...
如果不考虑兼容
IE可以用FileReader API读取文件 获得文件的Base64值img标签 可以直接用Base64展示图片
之后可以用一些插件剪裁图片后上传服务器保存
FileReader API 参考文档：https://developer.mozilla.org...jQuery 剪裁图片插件(支持移动端)：http://www.jq22.com/jquery-in...
至于压缩的话，剪裁之后的图片大小自然比原图小很多
原问题地址：https://segmentfault.com/q/10...
刚写的文章：
https://segmentfault.com/a/11...
主要是用原生的HTML5文件表单选择，然后用插件压缩，最后直接用插件输出的FormData上传。
