返回

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

发布时间:2022-04-06 21:35:06 474
# 前端# 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)
}



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

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像