Php yii框架中的多文件上传，保存图像前显示预览

如何在yii框架中保存前显示多个图像预览 我们正在使用

$imageData = $this->widget('CMultiFileUpload', array(
                 'model'=>$model,
                'name' => 'fileupload',
                // 'id'=>'fileupload';
                'accept' => 'jpeg|jpg|gif|png', // useful for verifying files
                'duplicate' => 'Duplicate file!', // useful, i think
                'denied' => 'Invalid file type',
                'options'=>array(
                    'onFileSelect'=>'function(e, v, m){ alert("onFileSelect - "+v) }',
                    'afterFileSelect'=>'function(e, v, m){ alert("afterFileSelect - "+v) }',

                    'onFileAppend'=>'function(e, v, m){ alert("onFileAppend - "+v) }',
                    'afterFileAppend'=>'function(e, v, m){
                        $("#dvPreview").html("<img src="+v+" />"); 
                        alert("afterFileAppend - "+v) }',
                    'onFileRemove'=>'function(e, v, m){ alert("onFileRemove - "+v) }',
                    'afterFileRemove'=>'function(e, v, m){ alert("afterFileRemove - "+v) }',
                    'max'=>3,
                 ),

            ));

$imageData=$this->widget（'CMultiFileUpload'，数组(
'model'=>$model，
'name'=>'fileupload'，
//'id'=>'fileupload'；
'接受'=>'jpeg | jpg | gif | png'，//用于验证文件
'duplicate'=>'duplicate file！'，//我认为这很有用
“拒绝”=>“无效文件类型”，
“选项”=>数组(
'onFileSelect'=>'函数（e，v，m）{alert（“onFileSelect-“+v）}'，
'afterFileSelect'=>'函数（e，v，m）{alert（“afterFileSelect-“+v”）}，
'onFileAppend'=>'函数（e，v，m）{alert（“onFileAppend-”+v）}'，
'afterFileAppend'=>'函数（e、v、m）{
$（“#dvPreview”）.html（“”）；
警报（“afterFileAppend-“+v）}”，
'onFileRemove'=>'函数（e，v，m）{alert（“onFileRemove-“+v”）}，
'afterFileRemove'=>'函数（e，v，m）{alert（“afterFileRemove-“+v”）}，
“最大值”=>3，
),
));

您可以使用FileReader访问选定的文件。这是来自（左键单击>徽标>上载）的代码。修改它以访问所有选定的文件（

this.files[0]

）

---

我正在使用Yii框架小部件上载多个文件，因此这可能对我不起作用。@Brijeshkumar Yii没有该功能。您始终可以扩展

CMultiFileUpload

，并将代码添加到该小部件中。

$(document).on('change', '#ModelName_fileupload', function () {
    var fileEl = $(this);

    if (this.files && this.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            fileEl
                .hide()
                .parent()
                .find('.img-preview')
                .show()
                .attr('src', e.target.result);
        };

        reader.readAsDataURL(this.files[0]);
    }
});