简体   繁体   中英

Upload,Preview,Delete images and documents from database using PHP

Hiii Everyone, I tried with below code for upload preview and delete images. Below is my code for upload and delete.

Javascript Code

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

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

Below is the output i got for this is在此处输入图片说明

ANd After press X it is replace as empty filename.But what i want to do is while retrieve from database i can show only image i cannot show delete button and my filename also set instead of No file chosen.

Code Which i tried to retrieve is

<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 is the variable having image name which is retrieve from database.But what i get while i tried this is 在此处输入图片说明

While retrieve from database i can show image but X button is missing and input file is not set with file name as default no file chosen is showing.What i missed here.Could anyone help me to get out of this problem.

My CSS code is:

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

Value for file input

Due to security reasons it is not possible to setup the values for the file input.

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

Not Displaying Remove Icon
Your display icon not showing up as you have added the property display:none; whch hides the element on the page. You can look for more display options here .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM