正文

本地上传图片预览

author  author  2022-09-20  684

关键词：

<!DOCTYPE html >
<html >
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
<title>图片上传本地预览，获得图片的base64(可压缩)</title>     
<style type="text/css">
  .upload_image {
　　width: 800px;
  }
</style>
<script type="text/javascript" src="jquery.min.js"></script>
   
</head>     
<body>
<div id="preview">
    <img id="imghead" width=200 height=200 border=0 src=‘‘>
</div>   
    <canvas id="uploadImg" hidden></canvas>
    <input type="file" id="fileUp" multiple hidden />    
    <label for="fileUp">点击上传图片</label>
    <button id=‘sub‘>提交</button>

<script type="text/javascript">
    var imgUpload = {
      imgBase64Arr: [],
      html : ‘‘,
      onSelect: function(files) {
        var i =0;
        $("#preview").html(‘<div class="upload_loading"></div>‘);
          var funAppendImage = function() {
            file = files.files[i];
            if (file) {
              var reader = new FileReader()
              reader.onload = function(e) {
                imgUpload.html = imgUpload.html + ‘<div id="uploadList_‘ + i + ‘" class="upload_append_list"><p class="img-outbox"><strong>‘ + file.name + ‘</strong>‘ +
                  ‘<a href="javascript:" class="upload_delete" title="删除" data-index="‘ + i + ‘">删除</a><br />‘ +
                  ‘<img id="uploadImage_‘ + i + ‘" src="‘ + e.target.result + ‘" class="upload_image" /></p>‘ +
                  ‘<span id="uploadProgress_‘ + i + ‘" class="upload_progress"></span>‘ +
                  ‘</div>‘;
                i++;
                funAppendImage();
              }
              reader.readAsDataURL(file);
            } else {
              $("#preview").html(imgUpload.html);
              $(".upload_delete").click(function(){
                imgUpload.funDelteimg($(this).parents(".img-outbox"));
                // console.log(files.files[parseInt($(this).attr("data-index"))])
                // imgUpload.funDelteimg(files.files[parseInt($(this).attr("data-index"))]);
               }
              )
            }
          };
        funAppendImage();
      },
      funDelteimg: function(_this){
        console.log(_this)
        $(_this).remove();//只能删除dom，无法删除内存中的files.files
      },
      funCanvas : function(width, height, ratio, file){//重新绘制图片，获得img的base64
        var canvas = document.getElementById("uploadImg");
        var cxt = canvas.getContext(‘2d‘);
        canvas.width = width;
        canvas.height = height;
        var img = new Image();
        img.src = file;
        cxt.drawImage(img, 0, 0, width, height);
        var imgBase = canvas.toDataURL("image/jpeg", ratio);
        imgUpload.imgBase64Arr.push(imgBase);

        return imgUpload.imgBase64Arr;

      },
    }

    //文件上传
    $("#fileUp").change(function(){
      imgUpload.onSelect(this)
    })

    //获得所有img的 src,可以传给后端 
    $("#sub").click(function(){
      var getBase = $(".upload_image");

      getBase.each(function(){//重新绘制图片，减小base64字符串的长度
        imgUpload.funCanvas(640, 400, 0.6, $(this).attr("src"));
      })
      console.log(imgUpload.imgBase64Arr)
    })



</script>  
</body>     
</html>

　　这里图片上传的思路：获得上传后的img,将file的img 转成base64 ,作为前端预览，也可以将base64的字符串，传到后端，由后端生成图片，在传到后端前，可以将其base64的字符串压缩一下，这里的采取的一个方法就是用canvas的重新绘制图片，然后在canvas里就会有新的base64字符串。

js上传图片本地预览缓存

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>文件上传</title><scriptsrc="jQuery.js"></script><styletype="text/css">#file{display:block;width: 查看详情

图片本地上传预览

在IE里面显示的话，你可以用div直接显示图片，不通过img来添加SRC，这样就不会有小图标出现例子：<divclass="banner_up_pic"id="imgPreDiv"></div>varfile_upl=document.getElementById("file"); file_upl.select(); 获取图片路径 varim 查看详情

本地多个图片上传预览，删除

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scriptsrc="js/jquery-2.1.4.min.js"type="text/javascript"charset="utf-8"></s 查看详情

js实现图片上传本地预览

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv=" 查看详情

jquery图片上传前先在本地预览（不经过后端处理）

前段时间遇到一个问题，前端想实现图片上传预览（不经过后端PHP或JAVA处理），用户点击file按钮上传文件，点击确定马上就能看到预览的效果，但在实现的时候无论怎样都取不到file上图片的真实路径，得到的反而是C:fakepatha.jpg... 查看详情

js兼容各个浏览器的本地图片上传即时预览效果

...了下这方面的的问题，所以也就做了个简单的demo来实现本地上传图片即时预览效果。其在标准浏览器(firefox,chrome，IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10以下浏览器用了滤镜来解决图片显示问题。在看... 查看详情

jquery怎么打开本地图片预览，点击确定后上传

...图片后，如图的三个图片框要显示选中的图片，并且输出本地图片路径，如图，点击确定更换后再上传图片到服务器，并且输出上传服务器的图片地址参考技术A1,tapmodo/JcropJcrop是人气最高的图片裁剪jQuery插件，stars数量2k+，功能... 查看详情

图片上传组件开发(代码片段)

...用：用户点击“选择图片”，弹出文件浏览器，可以选择本地的图片，点击确认后，所选图片会按照原始比例出现在页面的浏览区域中。组件调用：开发者可以自己定义图片预览区域的大小，并限定所传图片的文件大小和尺寸大... 查看详情

javascript实现本地图片上传预览功能（兼容iechromeff）(代码片段)

...og.csdn.net/nhconch/article/details/7295456需要解决的问题有：本地图片如何在上传前预览、编辑；最近发现这个功能很多是基于flash实现的，很多JavaScript实现的代码兼容性都很差，特别是在IE和firefox和chrome三个浏览器上不... 查看详情

3种上传图片并实现预览的方法

在常见的用户注册页面，需要用户在本地选择一张图片作为头像，并同时预览。常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在html页面；另一种思路是，直接在本地内存中预览图... 查看详情

微信小程序如何给服务器上传多张图片,微信小程序实现上传多张本地图片到服务器和图片预览...

1，前言最近在写小程序，用到了wx.uploadFile方法，发现这方法居然不支持同时上传多个文件，于是自己写了一个上传多个的方法。[图片上传失败...(image-c4d973-1610865751169)]2，需求博主做的是用户投诉页面；需... 查看详情

上传图片时预览

简述　　　　本文的使用场景主要是用户修改头像，选择本地图片后在页面上面显示选择的图片。使用jQuery+js实现。1.首先，页面上有一个input[type=‘file‘]标签<inputid="head"name="headPortrait"class="btnbtn-xmbtn-outlinebtn-primary"style="margin:... 查看详情

图片上传预览

例1：1.先创建一个file表单域，我们需要用它来浏览本地文件。<formname="form1"id="form1"method="post"action="upload.php"><inputtype="file"name="file1"id="file1"/></form>2.试下效果：　判断文件类型：当用户选择了一个图片文件时，希望他... 查看详情

使用input标签解决本地图片预览的问题(代码片段)

...端项目），就是在反馈页面点击上传图片的时候，实现在本地读取照片并预览的效果，这样的实现效果可以避开把图片上传到服务器在预览的尴尬，具体的页面展示效果如下：具体的代码如下（偷个懒，也为了大家看的更方便，... 查看详情

jquery:[1]实现图片上传并预览

...传并预览原理预览思路1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL；2.把对象URL赋值给实现写好的img标签的src属性File对象　　File对象可以用来获取文件的信息，还可以用来读取这个文件的内容，通... 查看详情

编辑图片时，能够实时显示上传的图片（预览）

...ObjectURL(this.files[0]);//获取图片的路径，该路径不是图片在本地的路径　　if(objUrl){　　　　$(".hide_imgimg").attr("src",objUrl);//将图片路径存入src中，显示出图片　　}});//建立一個可查看详情

图片上传组件开发(代码片段)

...户点击“选择图片”，弹出文件浏览器，可以选择本地的图片，点击确认后，所选图片会按照原始比例出现在页面的浏览区域中。组件调用：开发者可以自己定义图片预览区域的大小，并限定所传图片的文件大小和尺寸大... 查看详情

javascript图片的上传前预览（兼容所有浏览器）

功能描述通过 JavaScript 实现图片的本地预览（无需上传至服务器），兼容所有浏览器（IE6&IE6+、Chrome、Firefox）。实现要点 ● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。● 对于&nbs... 查看详情