求js或JQ代码,实现图片上传后在指定的div中以背景图显示

发布网友 发布时间：2022-04-07 06:05

我来回答

共4个回答

热心网友 时间：2022-04-07 07:34

function previewImage(file)
        {
          console.log(file)
          var MAXWIDTH  = 260; 
          var MAXHEIGHT = 180;
          var div = document.getElementById('clipart11show');
          if (file.files && file.files[0])
          {
              div.innerHTML ='<img id=imghead>';
              var img = document.getElementById('imghead');
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width  =  rect.width;
                img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }

 别人的代码....http://www.oschina.net/code/snippet_819257_22844

追问请问，你有测试过吗？

追答chrome测试过,ie没试

热心网友 时间：2022-04-07 08:52

如果是background的话使用 $("div").css("background-image","图片地址")，如果使用的img的话使用$("div").attr("src","地址");关键就是获取图片地址给弄上去追问不好意思，我补充一下:
图片点击上传后，只是做预览作用，因为还没有点击提交订单按钮，
所以图片还没有上传到服务器的，也就是说还没有真实的地址，

热心网友 时间：2022-04-07 10:27

看看这个 网页链接

热心网友 时间：2022-04-07 12:18

上传图片以后是上传到服务器上面吗？如果是，通过相对地址可以以及图片名称可以直接拼成url，这样就可以直接用咯。