获取本地图片的预览地址

var url = '';

if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
     url = document.getElementById(sourceId).value; 
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
     url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在开发网页或移动应用时,我们经常会用到element来预览本地图片。通常,我们可以使用HTML的<input>元素来创建一个文件上传框,然后通过JavaScript来获取用户选择的图片文件。接下来,我们可以使用element中的<img>元素来显示选中的图片。 首先,我们可以使用如下的HTML代码来创建一个文件上传框: <input type="file" id="file-upload" accept="image/*"> 上面的代码中,我们给<input>元素设置了type属性为"file",这表示这是一个文件上传框。我们还可以通过设置accept属性为"image/*"来限制用户只能选择图片文件。 当用户选择了图片文件后,我们可以通过JavaScript来获取用户选择的文件。我们可以通过下面的代码来监听文件上传框的change事件: const fileUpload = document.getElementById("file-upload"); fileUpload.addEventListener("change", function() { const selectedFile = fileUpload.files[0]; displayPreview(selectedFile); }); 上面的代码中,我们首先获取了文件上传框的DOM元素,并添加了一个change事件监听器。当用户选择了文件后,change事件被触发,我们可以从fileUpload.files数组中获取到用户选择的文件。 最后,我们可以使用element中的<img>元素来显示用户选择的图片。我们可以创建一个用于显示图片预览的容器,并将用户选择的图片设置为该容器的背景图片或src属性值。下面是一个简单的实现示例: const previewContainer = document.getElementById("preview-container"); function displayPreview(imageFile) { const reader = new FileReader(); reader.onload = function(event) { const imageUrl = event.target.result; previewContainer.style.backgroundImage = `url(${imageUrl})`; }; reader.readAsDataURL(imageFile); } 在上面的函数中,我们创建了一个FileReader对象,并利用它的readAsDataURL方法将图片文件转化为DataURL格式。在读取完成后,我们可以从event.target.result中获取到DataURL,并将其设置为图片预览容器的背景图片。 通过以上的步骤,我们就可以使用element来实现预览本地图片了。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值