用JQ(jquery.js)的ajax，input 的type=file 方式上传图片，分别用了formdata 和base64 两种方式请求上传

废话不多说，直接上代码。

　　input标签：

　　　　<input name="image" type="file" accept="image/*" value="" />

　　input监听：

　　　　$('input[name="image"]').change(function() {

　　　　　　var file = $(this)[0].files[0];

　　　　　　// formdata

　　　　　　postFile(file);

　　　　　　// base64

　　　　　　postBase64(file);　　

　　　　});

　　接口上传：

　　　　1、formdata 表单的形式

　　　　　　function postFile(file) {

　　　　　　　　var _token = $('input[name="_token"]').val();

　　　　　　　　var formData = new FormData();

　　　　　　　　var postUrl = $('input[name="postFile"]').val();

　　　　　　　　formData.append('file', file);

　　　　　　　　formData.append('_token', _token);

　　　　　　　　$.ajax({

　　　　　　　　　　url: postUrl,

　　　　　　　　　　type: "post",

　　　　　　　　　　data: formData,

　　　　　　　　　　cache: false,//上传文件无需缓存

　　　　　　　　　　processData: false,//用于对data参数进行序列化处理 这里必须false

　　　　　　　　　　contentType: false, //必须

　　　　　　　　　　success: function (res) {

　　　　　　　　　　},

　　　　　　　　　　error: function (error) {

　　　　　　　　　　}

　　　　　　　　});

　　　　　　}
　　　　2、base64 的形式

　　　　　　function postBase64(file) {

　　　　　　　　var _token = $('input[name="_token"]').val();

　　　　　　　　var postUrl = $('input[name="postFile"]').val();

　　　　　　　　var base64 = checkAndHandleUpload(file); // 检查图片大小，并进行压缩小于2M

　　　　　　　　$.ajax({

　　　　　　　　　　url: postUrl,

　　　　　　　　　　type: "post",

　　　　　　　　　　data: {

　　　　　　　　　　　　_token: _token,

　　　　　　　　　　　　file: base64

　　　　　　　　　　},

　　　　　　　　　　success: function (res) {

　　　　　　　　　　},

　　　　　　　　　　error: function (error) {

　　　　　　　　　　}

　　　　　　　　});

　　　　　　}

　　　　　　// 校验图片转换后大小并上传

　　　　　　function checkAndHandleUpload(file) {

　　　　　　　　imgBase64(file, function (image, canvas) {

　　　　　　　　　　var maxSize = 2*1024; // 2M

　　　　　　　　　　var fileSize = file.size/1024; // 图片大小

　　　　　　　　　　if(fileSize > maxSize) { // 如果图片大小大于2m，进行压缩

　　　　　　　　　　　　uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);

　　　　　　　　　　　　uploadFile = convertBase64UrlToFile(uploadSrc, file.name); // 转成file文件

　　　　　　　　　　} else {

　　　　　　　　　　　　uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);

　　　　　　　　　　　　uploadFile = file;

　　　　　　　　　　}

　　　　　　　　　　var compressedSize = uploadFile.size / 1024 / 1024;

　　　　　　　　　　if(compressedSize.toFixed(2) > 2.00) {

　　　　　　　　　　　　checkAndHandleUpload(uploadFile);

　　　　　　　　　　} else {

　　　　　　　　　　　　// document.getElementById('previewImage').src = uploadSrc;

　　　　　　　　　　　　uploadFile = convertBase64UrlToFile(uploadSrc, file.name); // 转成file文件

　　　　　　　　　　　　var formFile = new FormData();

　　　　　　　　　　　　formFile.append('file', uploadFile);

　　　　　　　　　　　　formFile.append('file_type', 'file');

　　　　　　　　　　　　formFile.append('app_version', app_version);

　　　　　　　　　　　　uploadImgFile(formFile);

　　　　　　　　　　}

　　　　　　　　});

　　　　　　};

　　　　　　// 将图片转化为base64

　　　　　　function imgBase64(file, callback) {

　　　　　　　　var self = this;

　　　　　　　　// 看支持不支持FileReader

　　　　　　　　if (!file || !window.FileReader) return;

　　　　　　　　// 创建一个 Image 对象

　　　　　　　　var image = new Image();

　　　　　　　　// 绑定 load 事件处理器，加载完成后执行

　　　　　　　　image.onload = function(){

　　　　　　　　　　// 获取 canvas DOM 对象

　　　　　　　　　　var canvas = document.createElement('canvas')

　　　　　　　　　　// 返回一个用于在画布上绘图的环境, '2d' 指定了您想要在画布上绘制的类型

　　　　　　　　　　var ctx = canvas.getContext('2d')

　　　　　　　　　　// 如果高度超标 // 参数，最大高度

　　　　　　　　　　var MAX_HEIGHT = 500;

　　　　　　　　　　if(image.height > MAX_HEIGHT) {

　　　　　　　　　　　　// 宽度等比例缩放 *=

　　　　　　　　　　　　image.width *= MAX_HEIGHT / image.height;

　　　　　　　　　　　　image.height = MAX_HEIGHT;

　　　　　　　　　　}

　　　　　　　　　　// 获取 canvas的 2d 环境对象,

　　　　　　　　　　// 可以理解Context是管理员，canvas是房子

　　　　　　　　　　// canvas清屏

　　　　　　　　　　// console.log('canvas.width:', canvas.width);

　　　　　　　　　　ctx.clearRect(0, 0, canvas.width, canvas.height);

　　　　　　　　　　// 重置canvas宽高

　　　　　　　　　　canvas.width = image.width;

　　　　　　　　　　canvas.height = image.height;

　　　　　　　　　　// 将图像绘制到canvas上

　　　　　　　　　　ctx.drawImage(image, 0, 0, image.width, image.height);

　　　　　　　　　　// !!! 注意，image 没有加入到 dom之中

　　　　　　　　　　// console.log(file.type);

　　　　　　　　　　// console.log(canvas.toDataURL('image/jpeg',0.5));

　　　　　　　　　　//----------//

　　　　　　　　　　callback(image, canvas);

　　　　　　　　　　//--------//

　　　　　　　　};

　　　　　　　　if (/^image/.test(file.type)) {

　　　　　　　　　　// 创建一个reader

　　　　　　　　　　　var reader = new FileReader();

　　　　　　　　　　　// 将图片将转成 base64 格式

　　　　　　　　　　　reader.readAsDataURL(file);

　　　　　　　　　　　// 读取成功后的回调

　　　　　　　　　　　reader.onload = function () {

　　　　　　　　　　　　// self.imgUrls.push(this.result);

　　　　　　　　　　　　// 设置src属性，浏览器会自动加载。

　　　　　　　　　　　　// 记住必须先绑定事件，才能设置src属性，否则会出同步问题。

　　　　　　　　　　　　image.src = this.result;

　　　　　　　　　　　}

　　　　　　　　}

　　　　　　};

　　　　　　function convertBase64UrlToFile(dataurl, filename) {

　　　　　　　　var arr = dataurl.split(','),

　　　　　　　　　　mime = arr[0].match(/:(.*?);/)[1],

　　　　　　　　　　bstr = atob(arr[1]), n = bstr.length,

　　　　　　　　　　u8arr = new Uint8Array(n);

　　　　　　　　while (n--) {

　　　　　　　　　　u8arr[n] = bstr.charCodeAt(n);

　　　　　　　　}

　　　　　　　　console.log("mime", mime, "filename", filename);

　　　　　　　　return new File([u8arr], filename, {type: mime});

　　　　　　};