Hiii每个人, 我尝试使用以下代码进行上传预览和删除图像。 以下是我上传和删除的代码。
Javascript代码
<script>
var blank="";
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.height(100).width(100);
};
reader.readAsDataURL(input.files[0]);
}
else {
var img = input.value;
$('#img_prev').attr('src',img).height(100).width(100);
}
$("#x").show().css("margin-right","10px");
}
$("#x").click(function() {
$("#img_prev").attr("src",blank);
$("#x").hide();
$("#photo1").val("");
});
</script>
HTML代码
<input name="userImage[]" type='file' onchange="readURL(this);" class="inputFile" id="photo1"/></div>
<span id="previewPane1">
<img id="img_prev" src="#" alt="Upload your image" width="100" height="50"/>
<span id="x">[X]</span>
ANd按X后它被替换为空文件名。但我想要做的是从数据库中检索我只能显示图像我无法显示删除按钮,我的文件名也设置而不是没有选择文件。
我试图检索的代码是
<input name="userImage[]" type='file' onchange="readURL(this);" class="inputFile" id="photo1" ACCEPT="image/*"/></div>
<div class="col-md-4"><span id="previewPane">
<?php if($photo==''){?>
<img id="img_prev" src="#" alt="Upload your image" width="100" height="50"/>
<span id="x">[X]</span><?php } ?>
<span id="previewPane">
<?php if($photo!=''){?>
<img id="img_prev" src="<?php echo $photo;?>" alt="Upload your image" width="100" height="100"/>
<span id="x">[X]</span>
<?php
} ?>
</span>
$ photo是具有图像名称的变量,它是从数据库中检索的。但是我在尝试这个时得到的是
从数据库中检索时我可以显示图像,但是X按钮丢失,输入文件没有设置文件名,默认情况下没有显示所选文件。我在这里错过了。可以帮助我解决这个问题。< / p>
我的CSS代码是:
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
答案 0 :(得分:1)
文件输入值
出于安全原因,无法为其设置值 文件输入。
<!-- If you can, Anyone can stole your files -->
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>
未显示删除图标
当您添加了属性display:none;
时,您的显示图标未显示,这会隐藏页面上的元素。您可以查找更多显示选项here。