选下拉框的的值对应上传相应的图片_vue.js如何拿到多种类型表单值提交到后台，包含上传图片、单选、复选、文本框、下拉列表框...

2016-01-17

编辑更新

vue.js如何拿到多种类型表单值提交到后台，包含上传图片、单选、复选、文本框、下拉列表框

下面的html包括多种类型的表单，其中包括图片上传，如何拿到这些表单的值提交到后台？除了用jquery，想看看用vue.js怎么做。

说明：

1、下面html中用到了一个lrz.bundle.js的插件，作用是进行上传图片的压缩，github为：https://github.com/think2011/...

2、下面script标签中的代码是压缩图片，然后取得压缩后的图片。

3、需求：把所有表单的数据都获取到(包括图片、单选、复选、文本框、下拉列表框)，然后发送到php后台。

html如下：

文本框：

下拉选择框：

1

2

3

4

5

区域文本：

文件上传：

预览：

单选项：

1

2

3

多选项：

1

2

3

提交

crossorigin="anonymous">

$(function () {

var $preview = $('#preview');

// var formData = null;

$('#exampleInputFile').on('change', function () {

lrz(this.files[0], {

width: 800

}).then(function (rst) {

// 替换src实现预览

$preview.attr('src', rst.base64);

// 根据情况加入一些额外的参数

rst.formData.append('fileLen', rst.fileLen);

});

});

});

2016-01-17

编辑更新

vue.js如何拿到多种类型表单值提交到后台，有html的demo

下面的html包括多种类型的表单，其中包括图片上传，如何拿到这些表单的值提交到后台？除了用jquery，想看看用vue.js怎么做。

说明：

1、下面html中用到了一个lrz.bundle.js的插件，作用是进行上传图片的压缩，github为：https://github.com/think2011/...

2、下面script标签中的代码是压缩图片，然后取得压缩后的图片。

3、需求：把所有表单的数据都获取到(包括图片、单选、复选、文本框、下拉列表框)，然后发送到php后台。

html如下：

文本框：