YII:不点击保存按钮即可上传图片。

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>

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

在你的控制器中，输出上传并保存的文件名。