html——如何使用javascript上传和显示图像，而不必预先定义；src“；属性

emotion lv.1

发布时间：2022-04-06 21:35:06 489

相关标签： # 前端# css

在深入了解一天的课程之前，了解以下概念很重要。

好吧，我开始这项特别的研究是因为我在一个项目上被绊倒了，这在某种程度上是非常尴尬的，因为我花了好几个小时才找到最好的谷歌搜索，甚至找到了答案。我决定记录下我从这项研究中获得的一切，并与大家分享，因为它可能会对你们这些人有巨大的帮助。

主题：通过输入标签上传图像，为其创建src并格式化。

关键词是；DOMString，change，input，required，accept，capture，multiple，files，value。

值：文件输入值属性包含表示所选文件路径的DOMString。如果用户选择了多个文件，则该值表示他们选择的文件列表中的第一个文件。

使用输入读取时的值。值的前缀类似于C:\fakepath。。。这样可以防止恶意软件访问用户内容，从而保护用户的文件结构。

输入格式

类型：这为输入标记提供了访问文件的方向和操作线。

id：javascript或css使用它来访问和操作输入标记。

accept：指定文件输入应接受的特定类型的文件。各种类型用逗号分隔，如上面的示例所示。该文件只接受png和jpg文件。接受单词documet的标记的一个例子是

捕获：该属性指定将使用什么camara来捕获图像或视频数据；如果accept属性被指示为user，则将使用前camara，但如果是environment，则将使用罕见的camara。这也适用于麦克风。

多个：这是一个布尔属性，允许用户一次上载多个文件。

文件：它嵌入到浏览器中，每个文件都使用将自身附加到此数组。

// 
var input = document.querySelector('#inputImage');
//listen out for the change activity

input.addEventListener('change', upLoadImage);

function upLoadImage() {

  var file = input.files;
  console.log(file)
  //If you successfully logged the above in the console, it means you got an object and means that you are on the right path.


  //append the div with the result

  var image = document.querySelector('.image')
  var newImage = document.createElement('img')
  //Declare attributes of img including src



  newImage.setAttribute('src', URL.createObjectURL(file[0]));
  //append the Image tag into the div with class image
  image.append(newImage);

  var name = document.querySelector('.name')
  name.append(file[0].name)
}

Upload Image

我希望这能帮你渡过难关。

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。