Javascript 上传图片并在Codeigniter中显示
我有一个表格可以上传图片,如下所示:Javascript 上传图片并在Codeigniter中显示,javascript,php,codeigniter,Javascript,Php,Codeigniter,我有一个表格可以上传图片,如下所示: <head> <title> Image Upload </title> </head> <body> <div id="container"> <?php echo form_open_multipart('upload/uploadImage')?> <input type="file" name="userfil
<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>
图像上传
如何在表单中显示choose file的显示?似乎需要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>
函数showMyImage(文件输入){
var files=fileInput.files;
$('dummyImage').show();
对于(var i=0;i
您还可以在document.ready上调用showMyImage函数。您可以使用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]);
}
}
函数readURL(输入){
if(input.files&&input.files[0]){
var reader=new FileReader();
reader.onload=函数(e){
$('.image_preview').html('');
}
reader.readAsDataURL(input.files[0]);
}
}
将此功能用于您的计算机,如下所示-
我也有一个使用codeigniter的github回购,请查看以下链接:
我希望这对你有帮助