html上传图片后，在页面显示上传的图片

爱被打了一巴掌 2022-06-04 02:42 373阅读 0赞

html上传图片后，在页面显示上传的图片

1、html

  1. <form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form"> 
  2.             <input type="file" id="chooseImage" name="file">
  3.             <!-- 保存用户自定义的背景图片 -->
  4.             <img id="cropedBigImg" value='custom' alt="lorem ipsum dolor sit" data-address='' title="自定义背景"/>
  5.       </form>

2、js

  1. $('#chooseImage').on('change',function(){
  2.         var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
  3.             fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
  4.         // 检查是否是图片
  5.         if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
  6.             error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');
  7.             return;  
  8.         }
  9.         $('#cropedBigImg').attr('src',filePath);
  10.         $('#loding').show();
  11. });

本意是想当type=file的input的value改变的时候，得到图片路径，然后将路径赋给img的src，但是这样的路径是不支持在本地显示的。

3、修改可以在本地显示上传的图片的js

  1. $('#chooseImage').on('change',function(){
  2.         var filePath = $(this).val(),         //获取到input的value，里面是文件的路径
  3.             fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
  4.             src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
  6.         // 检查是否是图片
  7.         if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
  8.             error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');
  9.             return;  
  10.         }
  12.         $('#cropedBigImg').attr('src',src);
  13. });

只需要添加下面这句代码，就可以在浏览器上显示本地上传的图片了

  1. src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式

发表评论

表情：
评论列表 （有 0 条评论，373人围观）

还没有评论，来说两句吧...

相关阅读

    相关 上传图片

    开发工具与关键技术：Visual Studio 作者：肖广斌 撰写时间：2019年5月12日 在做项目时，我们在完善一些个人信息、或者一些页面时，我们需要用到图片，

    本是古典 何须时尚本是古典 何须时尚/ 0 赞/ 451 阅读