Question

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

<div class="clipart_select_box" style="border-style: solid;border-width: 1px;" title="Click to upload you logo, and the logo color will be same to the font color">
<label id="logo_1" class="attribsUploads" for="attrib_18_0" size="4" style="line-height: 16px;color: blue;">Logo 1</label>
</div> //点击这个div会弹出上传窗口

<input type="file" name="id[TEXT_PREFIX18]" id="attrib_18_0"> //这个是隐藏的input,由上面的label给予指令

<div id="clipart11show"></div> //需要显示上传背景图的div

补充一下：如果不能以背景图(background-image)方式显示的话，用img src也行的。。。
只作预览作用的

Answer 1

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没试

Answer 2

如果是background的话使用 $("div").css("background-image","图片地址")，如果使用的img的话使用$("div").attr("src","地址");关键就是获取图片地址给弄上去

追问

不好意思，我补充一下:
图片点击上传后，只是做预览作用，因为还没有点击提交订单按钮，
所以图片还没有上传到服务器的，也就是说还没有真实的地址，

Answer 3

看看这个 网页链接

Answer 4

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