输入模型之图片上传

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

前提

要看这片文章，首先你要看完 输入模型简单使用入门 ，并且已会使用为前提

方式一，直接提供现成的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
}