Question

当用户通过ajax从列表中选择文件时，我想直接上传图像。我不希望他们点击保存按钮进行上传。

    <div class="form-group">
            <label for="Email" class="col-sm-2 control-label">Profile Picture</label>
            <div class="col-sm-10">
                <input type="file" name="profile_pic"/>
                <span class="login-error"><?php if (isset($error['profile_pic'])) echo $error['profile_pic'][0]; ?></span>
            </div>
            <div>
                <?php 
                    if(isset($model['profile_pic']))
                        echo '<img width="200" height="150" class="col-sm-4" src="/uploads/profile/'.$model['profile_pic'].'" alt="" />';
                ?>
            </div>
        </div>

这是我写的视图代码。

有谁能建议我怎么做？

提前致谢。

Answer 1

您可以使用jQuery和jQuery Form plugin。

用<form>元素包装输入元素：

<form id="fileForm" method="POST" enctype="multipart/form-data" action="?">
     <input id="picInput" type="file" name="profile_pic"/>
</form>

并添加javascript：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://malsup.github.com/min/jquery.form.min.js"></script>
<script>
    $(function(){
        var $form = $("#fileForm");

        $form.ajaxForm({
            iframe: true,
            success: function(src){
                    if (!src) return;

                    $("#picDiv").html('<img width="200" height="150" class="col-sm-4" src="/uploads/profile/'+src+'" alt="" />');
            }
        });

        $("#picInput").change(function(){
            $form.submit();
        });
    });
</script>

请注意，我对包含图片和输入的div使用picDiv和picInput ID，因此您需要添加它们才能正常工作。

在您的Controller中，输出上传和保存的文件的名称。

YII：上传图片而不点击“保存”按钮。

1 个答案: