首页 > 其他分享 >jquery 实现获取本地图片并展示

jquery 实现获取本地图片并展示

时间:2024-04-19 15:34:23浏览次数:25  
标签:jquery files img 展示 URL 获取 本地 src

文件不能直接设置为 img 元素的 src 属性值。要展示 file 文件,需要在 img 属性中使用 JavaScript 来实现,可以参考以下代码:

html页面代码:

<input type="file" id="photoInput" accept=".jpg, .jpeg, .png" multiple>
<img id="uploaded-image" />

然后在js中监听文件输入:

 $('#photoInput').on('change', function (e) {
     let files = e.target.files;
     if(files && files.length>0){
        // 获取windows的URL工具
        var URL = window.URL || window.webkitURL;
        // 通过file生成目标URL,获取真实的路径
        var imgUrl = URL.createObjectURL(files[0]);
        //用attr将img的src属性改成获取到的url
        $(#upload-image).attr("src", imgUrl);
    }
 });    

然后就可以直接展示在页面上啦

 

标签:jquery,files,img,展示,URL,获取,本地,src
From: https://www.cnblogs.com/xiaoxiaomini/p/18145984

相关文章

  • Jquery技术
    Jquery技术一、Jquery基础1.1、Jquery简介jQuery由美国人JohnResig于2006年创建jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装它的设计思想是writeless,domorejQuery官网:http://jquery.com1.2、初识Jquery应用$("tr:even").css("backgrou......
  • Django国际化和本地化
    国际化和本地化定义国际化和本地化的目标是让同一站点为不同的用户提供定制化的语言和格式服务。Django支持文本、格式化日期、时间、数字以及时区的翻译。实际上,Django做了两件事:允许开发者和模板设计者指定在他们的app中哪些部分需要进行翻译或者格式化成当地的语言、......
  • JavaScript本地存储的方式有哪些
    Web存储技术1.localStorage特点:长期存储,除非手动删除否则会一直保存在浏览器中,清除缓存或卸载浏览器后消失。存储语法:window.localStorage.setItem(名字,值)获取语法:window.localStorage.getItem(名字)删除语法:window.localStorage.removeItem(名字)作用:删除localStorage......
  • telegraph + influxdb + grafana 实现交换机流量展示
    实验环境influxdb2:2.7.5telegraf:1.30.1grafana:10.4.2influxdb官方文档见https://docs.influxdata.com/influxdb/v2/,网络上很多文档比较老,可能是v1版本的influxdb。部署方法1:二进制从https://www.influxdata.com/downloads/可以查看不同版本的下载地址下载压缩包并解压、复......
  • var 和 let 在 jQuery中的区别
    下面通过代码案例来进一步解释var和let在jQuerylink函数中的区别:(function($){$.fn.link=function(){//Exampleusing'var'varexampleVar='Thisisavarvariable';//Exampleusing'let'letexamp......
  • 使用Maps SDK添加本地slpk
    SceneViewm_sceneView;publicvoidLoadSceneLayerFromSLPK(SceneViewsceneView,stringslpkPath){ if(!File.Exists(slpkPath)) thrownewException("文件不存在"); if(null==sceneView.Scene) CreateScene(sceneView); Uritreespk=newSystem.Uri......
  • 团队演讲视频及其ppt展示
    演讲视频地址:https://dmxupday.oss-cn-beijing.aliyuncs.com/video_20240417_114735_edit.mp4ppt展示:https://files.cnblogs.com/files/blogs/821500/益享-视频分享计划.pptx?t=1713349463&download=true部分内容展示:......
  • 电梯会议+原型展示
    视频效果展示:原型展示PPT:......
  • 离线使用Pyecharts制作可视化图表——方法1:启动本地 js 服务
    在离线使用Pyechart进行可视化数据绘图的时候,会有生成的html网页打不开,或者是网页不出图像,是一个空白页面的问题出现,搜索发现其主要原因是:由于PyEcharts在升级到1.x版本后,将原来HTML网页中使用到的很多js文件换为了在线获取的方式,例如打开我本地生成的bar.html示例文件,就会发......
  • gpupdate.exe 是 Windows 操作系统中的一个命令行工具,用于立即刷新本地计算机或用户的
    C:\Mount\Windows\System32\gpupdate.exeC:\Mount\Windows\SysWOW64\gpupdate.exeC:\Mount\Windows\WinSxS\amd64_microsoft-windows-g..policy-cmdlinetools_31bf3856ad364e35_10.0.20348.2340_none_e3e1b64c0e292aa6\gpupdate.exeC:\Mount\Windows\WinSxS\......