Question

我有一张表格可以上传如下图片：

<head>
    <title> Image Upload </title>
</head>

<body>
    <div id="container">
        <?php echo  form_open_multipart('upload/uploadImage')?>
        <input type="file" name="userfile" />
        <p>
            <input type="submit" name="submit" value="submit" />
        </p>
        <?php echo form_close();?>
    </div>
</body>

</html>

如何在表单中显示选择文件？

Answer 1

似乎你需要javascript：

<div class="col-lg-6">
                <input id="userfile" name="userfile" type="file"  onchange="showMyImage(this)">
                <img id="dummyImage" src="#" alt="your image" style="display: none; width: 200px;"  />
            </div>

<script>
    function showMyImage(fileInput) {
        var files = fileInput.files;
        $('#dummyImage').show();
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /image.*/;
            if (!file.type.match(imageType)) {
                continue;
            }
            var img = document.getElementById("dummyImage");
            img.file = file;
            var reader = new FileReader();
            reader.onload = (function (aImg) {
                return function (e) {
                    aImg.src = e.target.result;
                };
            })(img);
            reader.readAsDataURL(file);
        }
    }
</script>

您还可以在document.ready

上调用showMyImage函数

Answer 2

您可以使用javascript FileReader（）执行此操作，例如：

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $('.image_preview').html('<img src="'+e.target.result+'" alt="'+reader.name+'" class="img-thumbnail" width="304" height="236"/>');
    }
    reader.readAsDataURL(input.files[0]);
}
}

使用此功能 - 我还使用codeigniter为此创建了一个github repo，请查看以下链接：

https://github.com/adrianrios25/CI_upload

我希望这会对你有所帮助。

上传图片并在Codeigniter中显示

2 个答案: