在yii框架中上传多个文件，在保存图像之前显示预览

Question

如何在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,
                 ),

            ));

Answer 1

您可以使用FileReader访问所选文件。以下是来自live example的代码（左键单击＆gt;徽标＆gt;上传）。修改它以访问所有选定的文件（this.files[0]）

$(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]);
    }
});