点击button按钮打开file选择图片并使用ajax图片上传并预览

 

最近有个需求让人很无奈，每条记录都需要让用户上传图片。由于使用插件无法准确的定位到那条记录，只好使用ajax上传图片准确获取id

先将file文件隐藏掉，通过点击button打开file选择图片，一些路径可根据自身情况进行更改

<div  class="picker" data="111" onclick="uploads('{$v.master_order_sn}'); " >
        <button class="ct_t_b"  >上传打款凭证</button>
</div>
<input type="file" hidden id="{$v.master_order_sn}" />
<div style="margin: -35px 0 0 60% " >
<img class="{$v.master_order_sn} pimg" src="__PUBLIC__/certificate/{$v.img}" style="width:100px;height:60px;">
                </div>

button点击显示file，id可根据自身情况更改。我的需求为每条记录都要有图片，所以使用数据库的数据作为id来区分每条数据

 function uploads(id)
{
            $("#"+id).trigger("click");
            openuploads(id);
}

后台接收图片时 而不再是普通的string类型的值。而是file类型   也就是文件类型
fromdata提交进行表单 ，ajax实现的图片上传
在ajax中加上processData : false,
                      contentType : false,
                      async:false,

function openuploads(id)
        {
            $("#"+id).change(function(){
                var formdata = new FormData();
                formdata.append('file',$("#"+id)[0].files[0]); //获取图片信息
                formdata.append('ordernumber',id); //
                $.ajax({
                    url : "<?php echo U('uploadscertificate'); ?>",
                    type : 'post',
                    data:formdata,
                    cache:false,
                    dataType:'json',
                    processData:false,
                    contentType:false,
                    success : function (e)
                    {
                        if (e.status)
                        {
                            $('.'+id).attr('src','__PUBLIC__/certificate/'+e.msg);
                        }
                        else
                        {
                            $.alert(e.info,'');
                        }
                    }
                });
            });
        }

效果：

完结！撒花！