jqueryForm 异步上传图片文件

Posted 2020-10-08 月下追魂的故事

首先是HTML格式：

<li>
                                    <span>上传：</span>
                                    <div class="loginInput">
                                        <div class="fileInput">
                                            <div class="fileBox">
                                                {if $info[‘certificate‘]}
                                                <img src="{$info[‘certificate‘]}" width="278">
                                                {else}
                                                <i class="filePic"></i>
                                                <p>法人证书或营业执照复印件</p>
                                                {/if}
                                            </div>
                                            <input class="files" id="fileupload" name="file" type="file" value="{$info[‘certificate‘]}"/>
                                            <input type="hidden" name="certificate" id="pic_val" >
                                        </div>
                                    </div>
                                </li>

 input 的 name建议设置成file 要不有时候接收不到传递到后台的参数。

然后是js：

<script src="https://www.helloweba.com/demo/ajaxsubmit/jquery.form.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var bar = $(‘.bar‘);
        var percent = $(‘.percent‘);
        var showimg = $(‘#showimg‘);
        var progress = $(".progress");
        var files = $(".files");
        var btn = $(".btn span");
        $("#fileupload").wrap("<form id=‘myupload‘ action=‘{HOST_NAME}user/User/import3‘ method=‘post‘ enctype=‘multipart/form-data‘></form>");
        $("#fileupload").change(function(){
            $("#myupload").ajaxSubmit({
                dataType:  ‘json‘,
                beforeSend: function() {
//                    showimg.empty();
//                    progress.show();
//                    var percentVal = ‘0%‘;
//                    bar.width(percentVal);
//                    percent.html(percentVal);
//                    btn.html("上传中...");
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    var percentVal = percentComplete + ‘%‘;
                    bar.width(percentVal);
                    percent.html(percentVal);
                },
                success: function(data) {
                    if(data.status == 0) {
                        $(‘.fileBox i‘).hide(); //删除
                        $(‘.fileBox p‘).hide(); // 删除
                        $(‘.fileBox img‘).attr(‘src‘, data.name); // 显示
                        $(‘.fileBox img‘).show(); //显示
                        $("#pic_val").attr(‘value‘, data.name); //传递图片值
//                        $("#show_pic_show").attr(‘src‘, data.name); // 传递到初始阶段

                    }else{
                        layer.msg(data.name, {
                            offset: ‘t‘,
                            anim: 6
                        });
                        return false;
                    }
                    return false;

                },
                error:function(xhr){
                    btn.html("上传失败");
                    bar.width(‘0‘)
                    files.html(xhr.responseText);
                }
            });
        });
    });
</script>
<!--ajax图片上传结束-->

后台代码PHP：

// 上传文件
    public function import3Action()
    {
        //上传头像
        if(isPost()){
            $file = $_FILES[‘file‘][‘tmp_name‘];
            if(!empty($file)){
                Load::load_class(‘fileupload‘,DIR_BF_ROOT.‘classes‘,0);
                $up = new fileupload;
                $up -> set("path", DIR_ROOT . ‘static/uploadfile/zhizhao‘);
                //            $up -> set("path",DIR_BF_ROOT . ‘excel/‘);
                $up -> set("maxsize", 200000);
                $up -> set("allowtype", array("gif", "png", "jpg","jpeg"));
                //            $up -> set("allowtype", array("xls"));
                if($up -> upload("file")) {
                    // 获取上传后的文件名称
                    $filename =  ‘/static/uploadfile/zhizhao/‘.$up->getFileName();
                    echo json_encode(array(‘status‘ => 0, ‘name‘ => $filename));exit();
                } else {
                    echo json_encode(array(‘statsu‘ => 1, ‘name‘ => $up->getErrorMsg()));exit();
                }
            }
        }

        //上传头像结束

        include $this->display(‘fileTest.html‘);
    }