Question

这里一直在思考解决这个问题的方法。

输入类型=“文件”的默认值为-未选择文件。

假设我已经上传了图片。这是cart / uploads / image.jpg，

所以我必须将图像目录及其图像名称回显到属性“值” 但似乎不起作用。我的第二个解决方案是使用90px宽度隐藏未选择的文件。但这没有任何意义，因为它没有回显任何值，因为没有回显会调用现有文件。我的第三个解决方案是将“ 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

那行不通。用户必须手动选择要上传的文件。

这是怎么回事：如果尚无图像，请输入文件required，否则不要输入required。无论哪种情况，都不应尝试填充默认的value。然后，在服务器端，只要还没有映像就确保已提供文件，并且仅有条件地保存该文件。

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

在此代码段中，您可以看到一个选项。
您可以隐藏文件输入并显示标签，这样将不会显示“未选择文件”消息，但是单击标签将打开用于选择图像的框

var mapFunction1 = function() {
emit(this.userID, this.Z);
};

var reduceFunction1 = function(varKey,varZ) {
return Array.avg(varZ);
};

db.transaction.mapReduce(
mapfunction1, 
reduceFunction1,
{out:"mapreduce"}
)

$('#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;
}

将默认文件名从数据库更改为当前值

3 个答案: