javascript - 有没有办法在不刷新页面的情况下在 div 上上传和预览图像（替换背景图像）？

Posted 2023-03-06

【中文标题】javascript - 有没有办法在不刷新页面的情况下在 div 上上传和预览图像（替换背景图像）？

【英文标题】：javascript - Is there a way to upload and preview image on div (replace background-image) without refreshing page?

【发布时间】：2017-12-01 08:49:44

【问题描述】：

我有一个带有默认背景图像的 div（框）。我希望通过替换背景图像而不刷新页面来允许用户在框中上传图像和预览。提前致谢。以下是我的代码：

CSS：

#box 
    width: 200px;
    height: 200px;
    box-shadow: inset 1px 1px 40px 0 rgba(0,0,0,.45);
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    margin: 5% auto 0 auto;
    background-image: url('../images/Default_Img.png');
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 5px;
    overflow: hidden;
    
#overlay 
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,.75);
    text-align: center;
    padding: 45px 0 66px 0;
    opacity: 0;
    -webkit-transition: opacity .25s ease;
    -moz-transition: opacity .25s ease;


#box:hover #overlay 
    opacity: 0.5;

平均售价：

<div id="box">
     <div id="overlay">
           <asp:FileUpload ID="fileUpload" runat="server" style="visibility:hidden" onchange="readURL(this);"/>
           <asp:LinkButton ID="btnUpload" runat="server" CssClass="btn btn-default" ><i class="fa fa-upload"></i> Upload</asp:LinkButton>
       </div>
 </div>

javascript：

$(document).ready(function () 
            $('#<%= btnUpload.ClientID %>').click(function (e) 
                $('#<%= fileUpload.ClientID %>').click();
                return false;
            );
        );

function readURL(input) 
     if (input.files && input.files[0]) 
         // what to do here to get image url and replace background-image?
     

【问题讨论】：

使用 AJAX 上传文件。

您只是想上传文件？还是只想预览？

【参考方案1】：

试试这个：

function readURL(input) 
    if (input.files && input.files[0]) 
        var reader = new FileReader();

        reader.onload = function (e) 
            $('#blah').attr('src', e.target.result);
        

        reader.readAsDataURL(input.files[0]);
    


$("#imgInp").change(function()
    readURL(this);
    // call ajax here to uplaod the image
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
      <input type='file' id="imgInp" />
      <img id="blah" src="#"  />
  </form>

【参考方案2】：

你可以利用的目的..

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <canvas id="myCanvas" style="width: 150px; height: 150px;"></canvas>
  <input id="fileupload" type="file"  placeholder="" accept=".png,.jpg,.jpeg,.gif" />

试试这个..

$(document).ready(function () 
$("input[type=file]").change(function(e)
var canvas = $('#myCanvas')[0];
var ctx = canvas.getContext('2d');
var reader = new FileReader();
reader.onload = function (event) 

    var img = new Image();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    img.onload = function () 
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    
    img.src = event.target.result;

reader.readAsDataURL(e.target.files[0]);
);
);

Jsfiddle：https://jsfiddle.net/knL5n95r/2/