YII：上传图片而不点击保存按钮。答案

【问题标题】：YII: Upload image without clicking on save button.YII：上传图片而不点击保存按钮。
【发布时间】：2014-04-17 06:02:36
【问题描述】：

当用户通过 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>

这是我编写的视图代码。

谁能建议我怎么做？

提前致谢。

【问题讨论】：

这个怎么样？ blueimp.github.io/jQuery-File-Upload
@Log1c 如果没有任何插件就可以完成就好了:)
好的，那么你需要使用jQuery（或javascript）$('input[type=file]').change(function(e){ //code to submit form, so it will start uploading });$('input[type=file]').change(function(e){ //code to submit form, so it will start uploading });绑定文件输入控件的change()事件。

标签： php jquery ajax yii

【解决方案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 和 picInput 的 ID 用于包含图片和输入的 div，因此您需要添加它们才能正常工作。

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

【讨论】：