输入模型之图片上传

我们自带的输入模型，只有一个图片上传的位置。真正服务客户过程中，可能需要结合 extends.??? 标签来做上传多个图片的输入模型。

## 前提
要看这片文章，首先你要看完 [输入模型简单使用入门](5897.html "输入模型简单使用入门") ，并且已会使用为前提

## 方式一，直接提供现成的html、js代码
直接将下面代码，复制，你想加入到你输入模型哪里，就粘贴到输入模型代码的哪个位置。注意里面的id不要跟你输入模型中原有的id重名
````
<button onclick="javascript:document.getElementById('uploadImagesInputDemo').click(); return false;">上传图片</button>
<input type="file" id="uploadImagesInputDemo" name="file" style="display:none;" onchange ="uploadFileFuncDemo();">
<script>
function uploadFileFuncDemo() {
	var myform = new FormData();
	myform.append('image',$('#uploadImagesInputDemo')[0].files[0]);
	$.ajax({
		url: parent.masterSiteUrl+'sites/uploadImage.do',
		type: "POST",
		data: myform,
		contentType: false,
		processData: false,
		success: function (data) {
			console.log(data);
			if(data.result == 1){
				alert('图片上传成功，图片URL：'+data.url);
			}else{
				alert('上传失败.'+data.info);
			}
		},
		error:function(data){
			console.log(data)
		}
	});
}
</script>
````
加入后，保存输入模型，再回到内容管理中，编辑某个使用这个内容模型的内容，点一下按钮看看，能否上传图片。
若能正常上传图片，其中的alert的地方，可根据自己的意愿用js写实现方式。

## 方式二，自己使用图片上传 API 接口定制
#### url
http://wang.market/sites/uploadImage.do

#### Request Method
POST

#### 表单提交
以form表单提交的形式，提交一个参数名为 image 的图片。也就是相当于你要用js进行下面的提交。
````
<input type="file" name="image" />
````

#### 响应
````
{
    "result":1,
    "info":"success",
    "fileName":"1ebfbf74d00248e3810bb48da5c65cb2.png",
    "path":"site/1144/news/1ebfbf74d00248e3810bb48da5c65cb2.png",
    "url":"//cdn.weiunity.com/site/1144/news/1ebfbf74d00248e3810bb48da5c65cb2.png",
    "size":11
}
````
| 参数名称 | 类型 | 示例值 | 描述 |
| ------------ | ------------ | ------------ | ------------ |
| result | int | 1 | 执行情况。 <br/> 1:执行成功;  <br/> 0:执行失败 |
| info | String | success | 若result为0，这里返回失败的原因 <br/> 若result为1，是执行成功，这里没有什么用 |
| fileName | String |  | 上传的图片文件的名字 |
| url | String |  | 上传的图片文件的URL绝对路径，保存的也都是这个 |

快速体验

自己安装部署相关

三种后台说明简介

网站管理后台使用说明

代理后台使用说明

插件开发

serverless无服务器版本

其他

输入模型之图片上传