Изменение имени файла по умолчанию на его текущее значение из базы данных

Question

Здесь мыслятся, как бы решить эту проблему.

Значение по умолчанию для типа ввода = "файл": - Файл не выбран.

Предполагая, что я уже загрузил изображение.Это cart / uploads / image.jpg,

, поэтому мне нужно связать каталог изображений и его имя с атрибутом value, но, похоже, это не работает.Мое второе решение - использовать ширину 90 пикселей, чтобы скрыть выбранный файл.Но это не имеет смысла, потому что оно отображает значение no, так как нет echo, вызывающего существующий файл.Мое третье решение состоит в том, чтобы поместить «Required» в его тег, чтобы каждый раз, когда пользователь обновлял элемент.Он / она должен поставить изображение в порядке, чтобы обновить его.Но так не должно быть.Я хочу отобразить существующее изображение из значения в базе данных, поэтому, когда пользователь не меняет изображение.Это остается прежним.'не могу объяснить это, не очень хорошо говорю по-английски' извините заранее.

 <div class="custom-file">
 <label for="exampleFormControlInput1">Product Image</label>
 <input type="file" class="custom-file-input" id=image" name="image" 
 style="width: 90px"  value="cart1.10/'.$row['product_image'].'" 
 title="cart1.10/'.$row['product_image'].'" required>
 <label class="custom-file-label" for="customFile" ><img 
 src="cart1.10/'.$row['product_image'].'" width=100 height=100></label>
 </div>

Answer 1

в этом фрагменте вы можете увидеть опцию.
Вы можете скрыть ввод файла и показать метку, таким образом, сообщение "Файл не выбран" не будет отображаться, но нажатие на метку откроетокно для выбора изображения

$('#picture').on('change', function(e) {
	if(e.target.files.length){
  	getBase64(e.target.files[0])
    	.then(data => $("#img").attr('src', data));
      //your code to upload image
  }
});

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

#picture {
    display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" action="">
    <label for="picture" class="btn btn-primary">
    Upload picture
    </label>
    <input type="file" id="picture">
    <img id="img" width="200px" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200">
    <!-- in this place, you can put your php echo -->
</form>

Answer 2

<style type="text/css">
#div-file {
    -webkit-appearance: button;
    -moz-appearance:    button;
    appearance:         button;
    box-sizing: border-box;
    padding: 3px 10px;
    float: left;
    position: relative;  
    font-size: 14px;
    font-family: Sans-serif;
}

</style>
 <div class="custom-file">
 <label for="exampleFormControlInput1">Product Image</label>
 // if no uploaded image just the regular input file
 <input type="file" class="custom-file-input" id="image" name="image">
 // else this
<label for="uploadFile">
    <div id="div-file">Image name</div>
</label>
<input type="file" id="uploadFile" style="display:none" />
    <label class="custom-file-label" for="customFile" ><img src="cart1.10/'.$row['product_image'].'" width=100 height=100></label>
 // endif
 </div>

Вы не можете добавить значение в файл в целях безопасности, но вы можете сделать некоторые трюки, чтобы отобразить его, как вы хотите.просто измените что-нибудь, чтобы оно соответствовало вашему коду.

Answer 3

Это не сработает.Пользователь должен вручную выбрать файл для загрузки.

Как насчет этого: если изображение еще не существует, введите файл required, в противном случае не делайте его required.Ни в том, ни в другом случае вы не должны пытаться заполнить значение по умолчанию value.Затем на стороне сервера просто убедитесь, что файл был предоставлен, если изображение еще не существует, и сохраните файл только условно.