留言模块添加了上传附件的字段并在前端调用上传字段

留言模块添加了上传附件的字段，但是在前端怎么显示出来？显示普通QQ什么的字段很简单，但是上传附件应该怎么弄呢？

方法如下：

在前台form表单里面加个属性，如：

<form id="myform" >
<!--假设上传字段为liptic-->
<label for="">头像：</label>
<span class="view_img"></span><br/>
<input name="litpic" type="hidden" id="fileurl" value="" /><br/>
<input type="file" class="btn btn-primary rounded btn-block" name="file" id="fileid">
</form>

然后使用H5上传，这里需要先引入jQuery，然后使用下面的代码：

$(document).ready(function(){
  $("#fileid").change(function(){
    var form=document.getElementById("myform");
    var data =new FormData(form);
    $.ajax({
       url: "{fun U('common/uploads')}",//处理图片的文件路径
       type: "POST",//传输方式
       data: data,
       dataType:"json",   //返回格式为json
       processData: false,  // 告诉jQuery不要去处理发送的数据
       contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
       success: function(response){

        if(response.code==0){

          var result = '';
          result +='<img src="' + response['url'] + '" height="100"  />';
          $('.view_img').html(result);//写入预览的span里面
          $("#fileurl").val(response['url']);
        }else{
          alert(response.error);
        }

       }
    });

  });


});

==========================

上面代码可以自由修改，当然，如果多个上传按钮如何处理呢？这个也可以修改的，傻瓜式，就是多复制几个js代码，灵活一点就把ID改成class属性。