2016-05-07 50 views
1

嗨,大家好, 我試着用下面的代碼來上傳預覽和刪除圖像。 以下是我的上傳和刪除代碼。上傳,預覽,使用PHP從數據庫中刪除圖像和文檔

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> 

下面是我得到這個輸出 enter image description here

,然後按X後,將其替換爲空filename.But什麼我想要做的是從數據庫檢索我只能顯示圖像我無法顯示刪除按鈕,我的文件名也設置,而不是沒有文件chos恩。我試圖找回

代碼是

<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> 

$照片是變量具有圖像名稱是從database.But找回我得到什麼,而我想這是 enter image description here

雖然從檢索數據庫我可以顯示圖像,但X按鈕丟失,輸入文件沒有設置文件名默認沒有選擇文件顯示。我在這裏錯過了什麼。任何人都可以幫助我擺脫這個問題。

我的CSS代碼是:

#x { display:none; position:relative; z-index:200; float:right} 
#previewPane { display: inline-block; } 
+0

使用'如果(空($照片)){// 如果鏈接不存在 }其他{// 如果鏈接存在 }' –

+0

什麼,我試圖和我們的代碼都是相同的right.Now也關閉按鈕不顯示。僅顯示圖像 –

+0

您是否嘗試過使用檢測工具?有時候由於css,它們可能會重疊。 –

回答

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